javascript - 子元素触发的鼠标悬停事件 - 如何停止？

Question

我有这个界面，我想使用 Effect.Move 从 scriptaculous 构建(当然还有 Prototype)。

当顶部 div 在鼠标悬停时被触发时，span 标记将向左移动 50 像素 - 并在鼠标移出时重置而不移动到原始位置。问题是，任何时候从子元素输入此 div 元素时，我要移动的元素都会额外移动 50 像素。我试过使用 relatedTarget 和 toElement 来阻止传播此事件，但无济于事。这是代码，目前还不完整:

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>

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

Answer 1

您是否尝试使用 "mouseenter" and "mouseleave"而不是“鼠标悬停”和“鼠标悬停”？即使有子元素，它们也只会触发一次，并且 Prototype supports it since 1.6.1 .