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

Question

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

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

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

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成为事件的target时，原来的元素就不再是target了，而当你离开SVG时，又会导致原来的元素再次成为target，从而造成另一个事件触发。您只需将 pointer-events: none; 添加到您的 SVG class:

即可解决此问题

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

见updated Fiddle

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

Mousenter event listener fires multiple times while moving mouse within element but only when updating the innerHTML

javascript

innerhtml

mouseevent

addeventlistener

mouseenter