MouseLeave 表现得像 MouseOut？

问题描述

我觉得我快疯了...所以，根据我的理解和互联网的普遍共识，mouSEOut 会触发光标，留下一个元素或其任何子元素，而 {{ 1}} 只在离开事件附加元素的光标上触发。所以我采取了这样的准系统：

mouseleave

... 当鼠标离开该 div 的任何后代时，<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> 事件肯定仍在触发。我觉得我一定是在做一些明显错误的事情，但是……什么？

解决方法

尝试从 addEventListener 中删除最后一个参数 - 它称为 useCapture，默认情况下为 false。如果您传递 true，when 事件将在捕获阶段触发，这将导致在每个子元素上触发 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>

html javascript mouseleave mouseout