如何停止在列表中传播 mouseout 事件？答案

【问题标题】：How to stop propagation of mouseout event in a list?如何停止在列表中传播 mouseout 事件？
【发布时间】：2013-09-03 12:43:21
【问题描述】：

当我将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; }

【问题讨论】：

传播发生在向上。你不能阻止它在孩子身上运行，因为他们已经被处理过了。你想用这个来完成什么？
我想在鼠标离开列表时触发一个函数

标签： javascript dom-events html-lists mouseout stoppropagation

【解决方案1】：

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

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

mouseout event 在指向设备（通常是鼠标）时触发移离附有监听器的元素 或移离其中之一它的孩子。

请注意 mouseleave 支持已添加到 Blink (Chrome/Opera 15) 相当 recently，这就是为什么它在 Chrome 29 中不可用（但在开发版 Chrome 中已经存在）。

【讨论】：

谢谢你的回答，我试过mouseleave但是没用，而且在你的fiddle中好像没用！
糟糕！它适用于 Firefox，但不适用于 Google chrome！我在谷歌浏览器上试过了，这就是我错过这个的原因。我想知道为什么它不能在 Chrome 上运行！
好吧！我有 Chrome 29，这个版本没有 mouseleave 吗

【解决方案2】：

虽然@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);
}

未经测试

【讨论】：

这正是我想要避免的:)
此示例在每次鼠标离开 LI 时触发事件，我希望仅在鼠标离开整个 UL 时触发事件
对不起，如果代码不清楚，但这正是您想要的。它在外部元素的所有子元素上注册一个事件处理程序，并且该处理程序停止从子元素（内部列表）继续传播到父元素（包含ul）。因此，这具有预期的效果。希望。我还没有测试过
我测试了它jsfiddle.net/ubugnu/D7jwq/273，你看，当我们仅仅从一个 LI 传递到另一个 LI 时，计数器会增加，我想要的是当我们离开整个 UL 时这个计数器会增加