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

Question

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

Answer 1

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

The mouseleave event is fired when a pointing device (usually a mouse) is moved off the element that has the listener attached.

The mouseout event is fired when a pointing device (usually a mouse) is moved off the element that has the listener attached or off one of its children.

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