如何解决即使光标没有移动/离开/进入父级,Mouseenter 也会运行
因此,当您单击元素时,mouseenter
会运行,即使它从未离开父元素,并且 mouseleave
不会触发。
我已经检查了 MDN 文档,并且这些事件都没有冒泡且不可取消;那么为什么一个运行而另一个不运行?
如果您使用 style.display = 'none';
,问题就会消失,尽管元素不会被删除,如果您同时运行 display: none
和 remove()
,它也不起作用。>
好吧,我认为它运行是因为它认为它会在瞬间离开父级,但按照这种逻辑,mouseleave
也应该运行吗?
e.stopPropagation()
也没有效果
const container = document.querySelector('.container');
const reset = document.querySelector('.reset');
container.addEventListener('mouseenter',() => {
console.log('enter');
});
container.addEventListener('mouseleave',() => {
console.log('leave');
});
reset.addEventListener('click',() => {
container.innerHTML = '';
let i = 8;
while (i--) {
const block = document.createElement('div');
block.addEventListener('click',() => {
block.remove();
});
block.classList.add('block');
container.append(block);
}
});
for (const block of document.querySelectorAll('.block')) {
block.addEventListener('click',() => {
block.remove();
});
}
.container {
display: flex;
padding: 2px;
background: grey;
}
.container>.block {
width: 100px;
height: 100px;
background: black;
margin-right: 5px;
}
.reset {
color: #f3f3f3;
background: grey;
padding: 8px 16px;
position: absolute;
bottom: 10px;
right: 10px;
}
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="reset">
Reset
</div>
小提琴:https://jsfiddle.net/burzjpse/1/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。