如何检测鼠标何时远离元素

Question

当鼠标在元素上移动时会触发mousemove。 如何检测鼠标何时移动到元素外？ 换句话说，除了代码段中的div之外，页面上的任何位置。 不是鼠标离开时，只要鼠标移动到元素外，就会触发。

 const div = document.querySelector('div'); div.addEventListener('mousemove', function() { document.body.classList.add('mouse-moving'); }); 

 div { height: 200px; width: 300px; background-color: red; } .mouse-moving { background-color: green; } 

 <div></div> 

Answer 1

您可以使用onmouseover和onmouseout

 const div = document.querySelector('div'); div.onmouseover = ()=> document.body.classList.add('mouse-moving'); div.onmouseout = ()=> document.body.classList.remove('mouse-moving'); 

 div { height: 200px; width: 300px; background-color: red; } .mouse-moving { background-color: green; } 

 <div></div> 

Answer 2

您可以将mousemove事件侦听器添加到document并检查事件目标是否是您的div：

 const div = document.querySelector('div'); document.addEventListener('mousemove', function(e) { if(e.target !== div) { div.textContent = "outside the div (" + e.clientX + ", " + e.clientY + ")"; } else { div.textContent = "inside the div (" + e.clientX + ", " + e.clientY + ")"; } }); 

 div { height: 200px; width: 300px; background-color: red; } 

 <div></div> 

注意：如果div包含其他元素，则测试将不起作用。 你必须检查一个目标的祖先是否是你的div：

document.addEventListener('mousemove', function(e) {
    var elm;
    for(elm = e.target; elm && elm !== div; elm = elm.parentElement)
        ;

    if(elm === div) {
        // inside div
    } else {
        // outside div
    }
});

 const div = document.querySelector('div'), result = document.querySelector("#result"); document.addEventListener('mousemove', function(e) { var elm; for(elm = e.target; elm && elm !== div; elm = elm.parentElement) ; if(elm === div) { result.textContent = "inside the div (" + e.clientX + ", " + e.clientY + ")"; } else { result.textContent = "outside the div (" + e.clientX + ", " + e.clientY + ")"; } }); 

 div { height: 200px; width: 300px; background-color: red; } div > div { height: 50px; width: 50px; background-color: blue; margin: 5px; } 

 <span id="result"></span> <div> <div></div> <div></div> </div> 

此外，如果div的子项位于其边界之外（由于某些绝对定位或其他原因），上述方法将无效，您必须检查鼠标坐标是否在div的边界矩形内。