1

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

HTML:

<a href="#foo" onClick="fooClickTest()" id="foo">foo</a>&nbsp;
<a href="#bar" id="bar">bar</a>&nbsp;

JavaScript:

function fooClickTest(e) {
    alert('fooClickTest');
    YAHOO.util.Event.addListener('bar', 'click', barClickTest1);
    YAHOO.util.Event.addListener('bar', 'click', barClickTest2);
    YAHOO.util.Event.addListener('bar', 'click', barClickTest3);
    YAHOO.util.Event.preventDefault(e);
}

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

function 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;
//        }
}

私が予想しているのは、ユーザーが をクリックしfooて 3 クリック ハンドラーを追加し、次に をクリックできること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 のイベントに関する私の理解は、単純にめちゃくちゃなのでしょうか? どうすれば目標を達成できますか?

4

1 に答える 1

9

次の理由により、これは期待どおりに機能しません。

追加のコードを記述しない限り、1 つの要素で特定のイベント リスナーが起動するのを防ぐ方法はありません。たとえできたとしても、イベント リスナーが起動される順序を保証することはできません。

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

于 2009-03-24T04:47:45.603 に答える