MouseLeave 表现得像 MouseOut？

【问题标题】：MouseLeave behaving like MouseOut?MouseLeave 表现得像 MouseOut？
【发布时间】：2021-09-30 01:25:01
【问题描述】：

我觉得我快疯了...所以，根据我的理解和似乎互联网的普遍共识，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 事件肯定仍在触发。我觉得我一定是在做一些明显错误的事情，但是……什么？

【问题讨论】：

标签： javascript html mouseleave mouseout

【解决方案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>

【讨论】：