1


0

私はYUIを使用して、JavaScriptイベントが伝播し続けないようにしています。 以下は、問題を示す最小限のHTMLと最小限のJavaScriptです。

HTML:

フーバー

JavaScript:

関数fooClickTest(e){alert( 'fooClickTest'); YAHOO.util.Event.addListener( 'bar'、 'クリック'、barClickTest1); YAHOO.util.Event.addListener( 'bar'、 'クリック'、barClickTest2); YAHOO.util.Event.addListener( 'bar'、 'クリック'、barClickTest3); YAHOO.util.Event.preventDefault(e); }

関数barClickTest1(e){alert( 'barClickTest1'); YAHOO.util.Event.preventDefault(e); }

関数barClickTest2(e){alert( 'barClickTest2'); YAHOO.util.Event.preventDefault(e); YAHOO.util.Event.stopEvent(e);
// Also tried:
//  YAHOO.util.Event.stopPropagation(e);
// and:
//        if (e.stopPropagation) {
//            e.stopPropagation();
//        } else {
//            e.cancelBubble = true;
//        }
}

私が期待しているのは、ユーザーが3つのクリックハンドラを追加するために 'foo’をクリックしてから 'bar’をクリックすることができるということです。 その後、ユーザーには2つのアラート、「barClickTest1」と「barClickTest2」が表示されます。 代わりに、3つのアラートすべてが発生します。 YAHOO.util.Event.stopEvent(e)は私が期待することをしません、それはイベントがbarClickTest3に伝播するのを止めることです。

私はFirefox 3.0.7とSafari 3.2.1でコードをテストしました。 上記のように、私はYAHOO.util.Event.stopPropagation(e)とe.stopPropagation()も試しました。 それらのどれもトリックをしませんでした。

これは明らかに人為的な例ですが、問題を実証するものではありません。 実際の解決策では、いくつかの条件が満たされた場合にのみイベントの伝播を防ぎます。

JavaScriptのイベントに対する私の理解は単純にめちゃくちゃになっていますか? 目標をどのように達成しますか?

1 Answer


9


これは期待通りには動作しません。

余分なコードを書かないと、単一要素上の特定のイベントリスナーが起動するのを防ぐことはできません。たとえあなたができたとしても、イベントリスナーが起動される順序を保証することはできません。

3回目のクリックハンドラに関連付けられたコードが実行されるかどうかを制御できるようにするには、コードを単一のイベントハンドラとして書き換える必要があります。