MouseLeave 表现得像 MouseOut？

Question

我觉得我要疯了...所以，根据我的理解和互联网的普遍共识，mouseout 在光标离开元素或其任何子元素时触发，同时mouseleave 仅在光标离开事件所附加的元素时触发。所以我把一些像这样的准系统：

<html>
<body>
    <div id='test'>
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
        </ul>
    </div>
<script>
    const div = document.getElementById('test');
    div.addEventListener('mouseleave', (e) => console.log('out'), true);
</script>
</body>
</html>

...并且当鼠标离开 div 的任何后代时，mouseleave 事件肯定仍在触发。我觉得我一定是在做一些明显错误的事情，但是......什么？

Answer 1

尝试从您的 addEventListener 中删除最后一个参数 - 它被称为 useCapture，默认情况下它是 false。如果您传递 true，事件将在捕获阶段触发，这将导致在每个子元素上触发 mouseleave。详细了解 useCapture 参数 - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

mouseleave 事件不会冒泡，因为它在离开子元素时不会触发父事件。但是当你通过 useCapture - 你强制事件在捕获阶段被触发。 MDN 上的事件阶段 - https://developer.mozilla.org/ru/docs/Web/API/Event/eventPhase

const div = document.getElementById('test');
div.addEventListener('mouseleave', (e) => console.log('out')); // Remove `true`

<html>
<body>
    <div id='test'>
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
        </ul>
    </div>
</body>
</html>

MouseLeave 表现得像 MouseOut？

MouseLeave behaving like MouseOut?

html

javascript

mouseleave

mouseout