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 ，則將在捕獲階段觸發 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>

MouseLeave 表現得像 MouseOut？

問題描述

1 個解決方案

解決方案1
1 已采納 2021-07-22 19:45:01

MouseLeave 表現得像 MouseOut？

問題描述

1 個解決方案

解決方案1 1 已采納 2021-07-22 19:45:01

解決方案1
1 已采納 2021-07-22 19:45:01