Polymer:停止 children 切换 mouseenter/out 事件

Polymer: Stop children from toggling mouseenter/out events

我有一个 Polymer 组件,它有 on-mouseenteron-mouseout 的侦听器。

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

和:

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

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

里面还有多个其他元素。

问题是,事件触发所有 child 元素,而不仅仅是 parent 容器。特别是 mouseout 似乎触发了多次。 我只希望在进入或退出主机时触发它们,而不是针对所有个人 children。否则会导致各种意外行为。

如果我不使用 Polymer 侦听器,这可以解决,但由于我希望保持一致并具有适当的范围,所以这不是一个真正的选择。 我错过了什么?

您应该使用 mouseleave 而不是 mouseout,因为每个子元素都会触发 mouseout

有关详细信息,请参阅 here and here