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

Question

我想使用 scriptaculous 中的 Effect.Move 来构建这个界面（当然，使用 Prototype）。

当鼠标悬停时触发顶部 div 时，span 标记将向左移动 50 像素 - 并在鼠标移开时重置而不移动到原始位置。问题是，每当从子元素输入此 div 元素时，我想要移动的元素都会额外移动 50 个像素。我尝试使用 latedTarget 和 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"和"mouseleave"而不是"mouseover"和"mouseout"？即使对于子元素，它们也只会触发一次，并且 Prototype 从 1.6.1 开始支持它。

Answer 2

试试这个功能

function hover(elem, over, out){
    $(elem).observe("mouseover", function(evt){
        if(typeof over == "function"){
            if(elem.innerHTML){
                if(elem.descendants().include(evt.relatedTarget)){ return true; }
            }
            over(elem, evt);
        }else if(typeof over == "string"){
            $(elem).addClassName(over);
        }
    });
    $(elem).observe("mouseout", function(evt){
        if (typeof out == "function") {
            if(elem.innerHTML){
                if(elem.descendants().include(evt.relatedTarget)){ return true; }
            }
            out(elem, evt);
        }else if(typeof over == "string"){
            $(elem).removeClassName(over);
        }
    });
    return elem;
}

用法是：

hover($('el_id'), function(elem, evt){
    /* Mouse over code here */
},
function(elem, evt){
    /* Mouse out code is here */
});

非常简单。

Answer 3

请查看此处 。

如果您正在查找触发 onmouseover 事件的特定元素，请使用 Prototype 的 Event.findElement(...) 方法来筛选不需要的子元素。

Serkan 的答案是一种完成任务的古怪方法，但不适用于所有浏览器。