Mousenter 事件侦听器在元素内移动鼠标时会多次触发，但仅在更新 innerHTML 时触发

Question

在我的代码中，我试图更新mouseenter事件上按钮的内部HTML。

我希望每次鼠标移动到元素时事件都会触发一次，但是当我的鼠标在元素内移动时，事件侦听器会触发多次。如果我删除事件侦听器中更新 innerHTML 的行，我会得到预期的行为。

为什么会这样，我该如何解决？请参阅下面的代码和链接的JSFiddle。

https://jsfiddle.net/h7gsv69m/2/

var box = document.getElementById('box');
var button = document.createElement('button');
button.innerHTML = '<svg><use xlink:href="#icon-added"></use></svg>';
button.addEventListener('mouseenter', function() {
document.getElementById('log').innerHTML += '<li>Mouseenter</li>';
var iconHover = this.dataset.iconHover;
//Comment out the following line to see expected behavior.
this.innerHTML = '<svg><use xlink:href="#icon-remove"></use></svg>';
});
box.appendChild(button);

Answer 1

SVG 有一个可能的属性，称为指针事件。此属性确定 SVG 是否可能是鼠标事件的目标。当 SVG 成为事件的目标时，原始元素不再是目标，当您离开 SVG 时，它会导致原始元素再次成为目标，从而导致另一个事件触发。您可以通过向 SVG 类添加pointer-events: none;来解决此问题：

button svg {
width: 22px;
height: 22px;
pointer-events:none;
}

查看更新的小提琴