3

親と子の 2 つの要素があります。両方ともオン クリック イベント ハンドラーを備えています。子要素をクリックすると、両方のイベント ハンドラーが実行されます。最初に親が実行され、次に子が実行されます (少なくとも chrome では)。ブラウザがどの順序でイベントを実行するかを決定する方法はわかりませんが、子のクリック イベントが親のクリック イベントの前に発生するように、この順序を具体的に設定する方法はありますか?

さまざまなイベント (マウスダウン、クリックなど) の順序に関する多くの質問と回答を見つけましたが、さまざまな要素での同じイベントの順序に関するものは何も見つかりません。

前もって感謝します！

4

1 に答える 1

4

親が先に走ってよろしいですか？イベントは、最も内側の要素から最も外側の要素にバブリングします (子のクリック ハンドラーは、親の前にトリガーする必要があります)。http://api.jquery.com/on/から:

ブラウザー イベントの大部分は、ドキュメント内の最も深い、最も内側の要素 (イベント ターゲット) から発生し、本文とドキュメント要素に至るまでバブル (伝播) します。Internet Explorer 8 以前では、変更や送信などのいくつかのイベントがネイティブにバブルしません。

とはいえ、常に親要素の動作を最初に実行したい場合は、次のようにすることができます。

function runFirst(){
    alert("I should always run first");   
}

function runSecond(){
    alert("I should always run second");
}

$('body').on('click', '.parent', function(){

    runFirst();

}).on('click', '.child', function(event){

    runFirst();
    runSecond();

    event.stopPropagation();
});

これは、動作を示すフィドルです: https://jsfiddle.net/8fxout3d/1/

于 2015-07-08T22:58:49.037 に答える