当鼠标移开元素时如何检测

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>

- Ricky

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>

- Ricky Cuarez

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 的边界矩形内。

- ibrahim mahrir