Polymer：マウスイベント/アウトイベントをトグルしないように子供を停止

Question

私は、リスナーがon-mouseenterとon-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'; 
} 

インサイド。

イベントは、親コンテナだけでなく、すべての子要素に対してトリガされるという問題があります。特にmouseoutは複数回トリガされているようです。 私はホストが入ったり出たりしたときにだけトリガーされるようにしたいが、すべての個々の子どものためではない。それ以外の場合、予期しない動作が発生します。

これは、ポリマーリスナーを使用しなかった場合は解決できましたが、一貫性を持たせて適切な範囲を持たせたいので、これは実際の選択肢ではありません。 私は何が欠けていますか？

Answer 1

mouseoutの代わりにmouseleaveを使用する必要があります。これは、子要素ごとにmouseoutがトリガーされるためです。

詳細については、hereおよびhereを参照してください。