events - 子のイベントを無効にする

Question

Ext JS 4 を使用しています。コンテナ内にボタンがあります。コンテナーで mouseover、mouseout、および click イベントを受け取りたいのですが、ボタンが原因で、mouseover および mouseout イベント ハンドラーがコンテナーで 2 回呼び出されます。子ボタンのイベントを無効にするにはどうすればよいですか?

Answer 1

4.0の新しいbubbleEventsの動作を実行していると思います。コンポーネントは、いくつかのイベントを親コンテナに伝播するようになりました。これは、DOMイベントのバブリングとは関係なく、コンポーネント階層の上位にあるコードで発生します。

http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.container.Container.html

最善の解決策は、イベントを処理したら、単にイベントを停止することです。これにより、すべてのバブリング、コンポーネント、またはDOMを防ぐことができます。一般に、クリックイベントに対してこれを実行して、クリックに応答して1つだけのことが発生するようにすることをお勧めしますが、マウスオーバーとマウスアウトに適しているかどうかはわかりません。

panel.on('click', function(e) {
    e.stopEvent();
    // do your stuff
});

あなたが試すことができる別の修正（私はしていません）は、ボタンのbubbleEventsをワイプすることです。

もう1つの、おそらく堅牢性の低い修正は、イベントバッファリングをオンにすることです。

el.on('click', this.onClick, this, {buffer: 10});

バッファリングは、構成可能な時間ウィンドウ内の重複イベントを1つに折りたたむため、高速起動または重複UIイベントをスムーズにするのに役立ちますが、バブリングでどのように機能するかはわかりません。

Answer 2

{
...
preventDefault: true,
...
}