0

私はいくつかの大規模にネストされた GUI コントロールを持っています - それらがクリックされたり変更されたりしたとき、またはイベントが DOM ツリーをさらに上に行くのを止めるために必要なものは何でも。すべてのブラウザで動作する必要があります。

この時点で、かなりぎこちない JS コードがいくつかあります。

//Do something in response to the original user action
//Leave it at that.
try {
        e.stopPropagation();
    }
    catch (ex) {

    }
    try {
        event.cancelBubble();
    }
    catch (ex) {

    }

    try {
        event.preventDefault();
    }
    catch (ex) { }
...

これは機能しますが、匂いがして気分が悪くなります (個人的には空の catch ブロックが嫌いです)。私が使用できるよりきちんとした x-browser トリックはありますか?

4

2 に答える 2

5

jQuery を使用する場合は、問題なくevent.stopPropagation()動作します。jQuery はイベント処理を統一します。

一般に、特別なブラウザ メソッドをテストする場合は、次のように実行できます。

if(event.stopPropagation) {
    event.stopPropagation();
}
else if...

これがjQueryが行っていることです。イベントのラッパーを作成し、統一されたインターフェイスを提供します。

イベント オブジェクトの名前はユーザーが定義します。イベント オブジェクトは、最初の引数としてイベント ハンドラーに渡されます。パラメーターを受け入れるようにイベント ハンドラーをセットアップする必要があります。

$('selector').click(function(foo) { // could be event, e, bar, whatever you want
    foo.stopPropagation();
});

通常 eまたはevent使用されます。

于 2011-02-24T11:33:03.593 に答える
3

cancelBubbleEventオブジェクトのメソッドではなく、ブール型のプロパティです。必要なプロパティまたはメソッドを使用する前にテストできるため、try/catch は必要ありません。したがって、jQuery を使用しない場合、次のようにしてイベント オブジェクトに必要なことが行われますe。

if (typeof e.stopPropagation != "undefined") {
    e.stopPropagation();
} else if (typeof e.cancelBubble != "undefined") {
    e.cancelBubble = true;
}
于 2011-02-24T11:41:08.307 に答える