当鼠标移动到元素之外时检测

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>