body 上的 mousemove 会停止 childs 上的 mouseenter

Question

我正在尝试使用 document.body 上的 mousemove 事件来更改光标（我没有使用 CSS 因为我想根据其位置编辑新光标).

这部分工作得很好，但是当我尝试检测其他元素 body 上的 mouseenter 时，我运行遇到了问题， mouseenter （或 mouseleave ）没有除非我移动鼠标太快否则它们会被发射，而且它们会一起发射...

这是我的 HTML:

  <style>
  #cursor {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #595959;
    border-radius: 9999px;
    z-index: 9999;
  }

  #test {
    width: 300px;
    height: 100px;
    border: 1px solid red;
  }

  </style>

  <div id="cursor"></div>
  <div id="test"></div>

和我的 Js：

const cursor = document.querySelector('#cursor');
const test = document.querySelector('#test');

function onBodyMouseMove(e) {
  cursor.style.left = e.clientX - 7.5 + 'px';
  cursor.style.top = e.clientY - 7.5 + 'px';
};

function enter(e) {
  console.log('mouse entered');
}

function leave(e) {
  console.log('mouse left');
}

document.body.addEventListener('mousemove', onBodyMouseMove);
test.addEventListener('mouseenter', enter);
test.addEventListener('mouseleave', leave);

可以查笔：https://codepen.io/hamid331994/pen/ExgGwqO

注：

使用 e.stopPropagation(); 无效

添加 { passive: false } 也不起作用

Answer 1

问题出在 CSS。你的鼠标光标仍然在 #cursor 元素之上，而不是 #test 元素之上，当你更快地移动光标时，这意味着 DOM 没有更新你的 #cursor 元素位置。

当您将 pointer-events: none; 添加到 #cursor 时将会有所帮助。

Answer 2

问题是在这种情况下 body 确实不如 window 重要。

所以你可以通过简单地添加这一行来解决这个问题。

window.addEventListener('mousemove', onBodyMouseMove);

body 上的 mousemove 会停止 childs 上的 mouseenter

mousemove on body stops mouseenter on childs

javascript

dom-events

注：