我有这个界面，我想使用 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>
我完全迷失在这里 - 有什么建议吗？
最佳答案
您是否尝试使用 "mouseenter" and "mouseleave"而不是“鼠标悬停”和“鼠标悬停”？即使有子元素，它们也只会触发一次，并且 Prototype supports it since 1.6.1 .
关于javascript - 子元素触发的鼠标悬停事件 - 如何停止？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4095546/