4

In my code I am attempting to update the innerHTML of a button on a mouseenter event.

I would expect the event to fire once each time my mouse moves into the element, but instead while my mouse is moving within the element, the event listener fires multiple times. If I remove the line updating the innerHTML within my event listener I get the expected behavior.

Why is this and how can I fix it? Please see the below code and linked 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);
albrechtnate
  • 291
  • 3
  • 13

1 Answers1

2

SVG's have a possible attribute called pointer-events. This attribute determines if the SVG may be the target of a mouse event. When the SVG becomes the target of the event, the original element is no longer the target, and when you leave the SVG, it causes the original element to become the target again, which causes another event to fire. You can solve this issue by just adding pointer-events: none; to your SVG class:

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

See updated Fiddle

KevBot
  • 17,900
  • 5
  • 50
  • 68
  • Wow, perfect! I was wracking my brain trying to figure out why my JS wasn’t working and here it was that one line of css solved all the buggy behavior I was experiencing. Thanks so much!! – albrechtnate Jul 18 '17 at 15:27