javascript - 如何停止在列表中传播 mouseout 事件？

Question

当我将一个mouseout事件附加到一个UL元素时，LI尽管我添加了stopPropagation()? 我的代码有什么问题？

http://jsfiddle.net/ubugnu/D7jwq/270/

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; }

Answer 1

在这种情况下，请使用“mouseleave”而不是“mouseout”。引用文档：

当定点设备（通常是鼠标）从连接了侦听器的元素上移开时，会触发mouseleave 事件。

当指点设备（通常是鼠标）移离连接了侦听器的元素或移离其子元素之一时，将触发mouseout 事件。

请注意，最近mouseleaveBlink (Chrome/Opera 15) 已添加支持，这就是为什么它在 Chrome 29 中不可用（但在 dev Chrome 中已经存在）。

Answer 2

尽管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);
}

它未经测试