Question

我想用Scriptaculous中的Effect.Move创建这个界面（当然是使用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"而不是“mouseover”和“mouseout”？即使使用子元素，它们也只会触发一次，并且Prototype supports it since 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

看here。

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

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

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

3 个答案: