javascript - 如何检测鼠标何时离开元素

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>