由子元素触发的鼠标悬停事件 - 如何阻止它？ [英] Mouseover event triggered by Child Elements - how to stop this?

问题描述

我想要使用Effect.Move来构建这个接口来自scriptaculous（当然还有Prototype）。

I have this interface I want to build using Effect.Move from scriptaculous (with Prototype, of course).

当顶部 div时是在鼠标悬停时触发的， span 标记是向左移动50个像素 - 并且在没有移动到鼠标移动的原始位置时重置。问题是，只要从子元素输入此 div 元素，我想移动的元素就会移动50个像素。我已经尝试使用 relatedTarget 和 toElement 来阻止此事件传播，但无济于事。这是代码，但尚未完成：

When the top div is triggered on a mouseover, a span tag is to move 50 pixels to the left - and reset without movement to the original location on mouseout. The problem is, any time this div element is entered from a child element, the element I want moved moves an additional 50 pixels. I've tried using relatedTarget and toElement to stop this event from propogating, but to no avail. Here is the code, as of yet incomplete:

e.observe('mouseover', function(evt) {
   var block = e.down('span');

   if(evt.target == block && !evt.relatedTarget.descendantOf(block)){
    new Effect.Move(block, { x: -50, duration: 0.4, 

    });
   } else {

   }

  });

HTML示例：

<div class='trigger'>
  <span class='to-be-moved'>...</span>
  <p>Child Element</p>
  <h2>Another Child Element</h2>
  <a>Link</a>
</div>

我在这里完全迷失了 - 有什么建议吗？

I'm totally lost here - any suggestions?

推荐答案

您是否尝试使用mouseenter和mouseleave而不是mouseover和mouseout？即使使用子元素，它们也只会触发一次，并且自1.6.1开始，Prototype 支持它。

Did you try to use "mouseenter" and "mouseleave" instead of "mouseover" and "mouseout"? They will only trigger once even with child elements, and Prototype supports it since 1.6.1.

这篇关于由子元素触发的鼠标悬停事件 - 如何阻止它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！