mouseenter在子元素上停止

Question

我试图使用mousemove事件在document.body上改变光标(我不使用CSS，因为我想根据它的位置编辑新的光标)。

这部分工作得很好，但是当我试图在其他元素上检测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);