Polymer: Stop children from toggling mouseenter/out events

Question

I have a Polymer component that has listeners to on-mouseenter and on-mouseout.

listeners: {
    mouseenter: 'mouseEnter',
    mouseout: 'mouseOut',
}

and:

mouseEnter: function (e) {
    console.log('\n\nENTER');
    this.$.deleteBtn.style.display = 'block';
},

mouseOut: function (e) {
    console.log('\n\nOUT');
    this.$.deleteBtn.style.display = 'none';
}

Inside that are multiple other elements.

The issue is, that the events trigger for all child elements and not only the parent container. Especially the mouseout seems to trigger multiple times. I only want them to be triggered when the host is entered or exited, not for all individual children. Otherwise causes all kinds of unexpected behaviour.

This could be solved, if I didnt use the Polymer listeners, but as I would like to be consistent and have the proper scope, this is not really an option. What am I missing?

Answer 1

You should use mouseleave instead of mouseout, because mouseout is triggered for each child element.

See here and here for more info.