javascript - Polymer: Stop children from toggling mouseenter/out events -
i have polymer component has listeners on-mouseenter
, 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 multiple other elements.
the issue is, events trigger child elements , not parent container. mouseout
seems trigger multiple times. want them triggered when host entered or exited, not individual children. otherwise causes kinds of unexpected behaviour.
this solved, if didnt use polymer listeners, consistent , have proper scope, not option. missing?
you should use mouseleave
instead of mouseout
, because mouseout
triggered each child element.
Comments
Post a Comment