如果之前添加了"鼠标移动"侦听器，则无法添加"单击"事件侦听器

当鼠标移动时，我使用将元素附加到鼠标上

let follower = document.getElementById('followMouse');
const onMouseMove = (e) => {
follower.style.left = e.pageX + 'px';
follower.style.top = e.pageY + 'px';
}
document.addEventListener('mousemove', onMouseMove);

稍后，当我尝试做一个"点击"事件侦听器时，点击不会触发：

let myElem = document.createElement('div');
myElem.classList.add('myDiv');
myElem.addEventListener('click', () => {
console.log('click in the myElem');
})
document.body.appendChild(myElem);

但是，如果我注释掉前面的mousemove事件侦听器，它就会触发。

为什么mousemove事件监听器不允许我稍后添加click监听器？

测试代码段：

let follower = document.getElementById('followMouse');
const onMouseMove = (e) => {
follower.style.left = e.pageX + 'px';
follower.style.top = e.pageY + 'px';
}
document.addEventListener('mousemove', onMouseMove);
let myElem = document.createElement('div');
myElem.classList.add('myDiv');
myElem.addEventListener('click', () => {
alert('click in the myElem'); //not working
})
document.body.appendChild(myElem);

.myDiv {
width: 100px;
height: 100px;
background-color: aqua;
}
#followMouse {
position: absolute;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.myDiv {
width: 100px;
height: 100px;
background-color: aqua;
}

#followMouse {
position: absolute;
}
</style>
</head>
<body>
<div id="followMouse">Follow mouse</div>
</body>
</html>

鼠标光标后面的文本覆盖了要单击的div。

添加pointer-events: none以修复问题

let follower = document.getElementById('followMouse');
const onMouseMove = (e) => {
follower.style.left = e.pageX + 'px';
follower.style.top = e.pageY + 'px';
}
document.addEventListener('mousemove', onMouseMove);
let myElem = document.createElement('div');
myElem.classList.add('myDiv');
myElem.addEventListener('click', () => {
alert('click in the myElem'); //not working
})
document.body.appendChild(myElem);

.myDiv {
width: 100px;
height: 100px;
background-color: aqua;
}
#followMouse {
position: absolute;
pointer-events: none;
}

<div id="followMouse">Follow mouse</div>

相关内容

最新更新

热门标签：