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

Question

在我的代码中，我试图在mouseenter事件中更新按钮的innerHTML。

我希望每当我的鼠标移动到元素中时会触发一次事件，但是当我的鼠标在元素中移动 时，事件监听器会多次触发。如果我删除了在事件监听器中更新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有一个名为pointer-events的可能属性。此属性确定SVG是否可能是鼠标事件的目标。当SVG成为事件的目标时，原始元素不再是目标，当您离开SVG时，它会导致原始元素再次成为目标，这会导致另一个事件触发。只需将pointer-events: none;添加到SVG类即可解决此问题：

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

请参阅updated Fiddle