如何停止mouseout事件在列表中的传播

How to stop propagation of mouseout event in a list?

本文关键字：传播 列表 何停止 mouseout 事件      更新时间：2023-09-26

当我将mouseout事件附加到UL元素时，尽管我添加了stopPropagation()，事件是否会传播到LI子级？我的代码出了什么问题？

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

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

鼠标离开事件在指向设备（通常是鼠标）时触发从附加了侦听器的元素中移出。

鼠标输出事件在指向设备（通常是鼠标）时触发被移离具有侦听器的元素或移离其子级。

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

尽管@raina77ow所说的mouseleave是实现这一点的正确方法，但如果您正在寻找更广泛的浏览器兼容性，添加此代码应该有效：

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

未经测试的

相关文章：