由子元素觸發的鼠標懸停事件 - 如何阻止？

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"而不是「mouseover」和「mouseout」？他們只會觸發一次，即使有子元素，原型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

Look here。

如果您正在查找觸發onmouseover事件的特定元素，請使用Prototype的Event.findElement(...)方法篩選不需要的子項。

Serkan的回答是一個完成任務的哈希方式，但不適用於所有瀏覽器。