如何停止在列表中傳播mouseout事件？

當我將mouseout事件附加到UL元素時，儘管我添加了stopPropagation()，但事件確實會傳播到LI子元素？我的代碼有什麼問題？如何停止在列表中傳播mouseout事件？

HTML代碼：

<ul id="myul"> 
    <li>Outer 
     <ul> 
      <li>Inner 
       <ul> 
        <li>Inner Inner</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 
<span id="count">0</span>

JS代碼：

document.getElementById('myul').addEventListener('mouseout', function(e){ 
    e.stopPropagation(); 
    document.getElementById('count').innerHTML = parseInt(document.getElementById('count').innerHTML) + 1; 
}, false);

CSS代碼：

li { padding: 20px; border: solid 1px #ddd; }

來源

2013-08-30 ubugnu

傳播發生**向上**。您無法阻止它在兒童上運行，因爲它們已經處理完畢。你想用這個完成什麼？ – Ktash

我想在鼠標離開列表時觸發一個函數 – ubugnu

在這種情況下，用 '鼠標離開' 而不是「鼠標移開」。引述DOC：

的mouseleave event當指向設備（通常爲小鼠）移離貼有聽者的元件被激發。

的mouseout event當指向設備（通常爲小鼠）移離具有附加或關閉其子之一聽者的元件被激發。

注意mouseleave支持已被添加到閃爍器（Chrome /劇院15）相當recently，這就是爲什麼它不是可用在Chrome 29（但已經有在開發Chrome瀏覽器）。

來源

2013-08-30 18:12:04 raina77ow

這裏是[fiddle]（http://jsfiddle.net/A4cqq/）。 – raina77ow

感謝您的回答，我嘗試了mouseleave，但它不起作用，它似乎不能在你的小提琴中工作！ – ubugnu

@ubugnu小提琴在這裏工作得很好，在win8.1上的鉻31 dev – Markasoftware

雖然mouseleave爲@ raina77ow說是做到這一點的正確方法，如果你正在尋找更廣泛的瀏覽器兼容性，添加此代碼應工作：

var ds=document.getElementById('myul').getElementsByTagName('*'); 
for(var l=0;l<ds.length;l++){ 
    ds[l].addEventListener('mouseout',function(e){e.stopPropagation()},true); 
}

它是未經測試

來源

2013-08-30 18:30:44 Markasoftware

這正是我想避免的:) – ubugnu

你是什麼意思？ – Markasoftware

這個例子每次鼠標離開LI時都會觸發事件，我希望僅當鼠標離開整個UL時觸發事件 – ubugnu

如何停止在列表中傳播mouseout事件？

回答

相關問題