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

当我将

mouseout

事件附加到

UL

元素时，事件会传播到

LI

子元素，尽管我添加了

stopPropagation（）

？我的代码怎么了

HTML代码：

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

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

var ds=document.getElementById（'myul'）.getElementsByTagName（'*'）；
对于（var l=0；lPropagation向上发生。您无法阻止它在孩子身上运行，因为他们已经处理了。您试图用它来完成什么？我想在鼠标离开列表时启动一个函数感谢您的回答，我尝试了mouseleave，但它不起作用，而且它似乎在您的小提琴中不起作用！哎呀！它在Firefox上有效，但在Google chrome上无效！我在Google chrome上试用过，这就是为什么我错过了这个。我想知道为什么它在chrome上无效！好的！我有chrome 29，mouseleave不适用于这个版本吗这正是我想要避免的：）此示例在每次鼠标离开LI时触发事件，如果代码不清楚，我希望仅当鼠标离开整个ULSorry时才会触发事件，但这正是您想要的。它在外部元素的所有子元素上注册一个事件处理程序，并且该处理程序停止从子元素继续推进（内部列表）到父级（包含
ul
）。因此，这具有预期的效果。希望如此。我没有测试它。yetI测试了它，你看，当我们仅从一个LI传递到另一个LI时，计数器递增，我想要的是当我们离开整个ul时，计数器递增
var ds=document.getElementById('myul').getElementsByTagName('*');
for(var l=0;l<ds.length;l++){
    ds[l].addEventListener('mouseout',function(e){e.stopPropagation()},true);
}