即使光标没有移动/离开/进入父级，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 (将#修改为@）