javascript - jquery/javascript を使用して初めてア​​ラートを防止する

Question

ドキュメントのクリックイベントに関数を付けたい。私の関数は添付されていますが、それも呼び出しています。理由がわかりません。デモ

$(function () {
    $('a').click(function () {
        $(document).bind('click', perform)
    })
})
function perform() {
    alert(0)
}

Answer 1

イベント「バブル」がa要素とその親の両方で発生する場合、次のように、jquery にこの要素の上でそれ以上のイベントが発生するのを強制的に停止させることができます。

http://jsfiddle.net/4yHC4/2/

$(function () {
    $('a').click(function (e) {
        $(document).bind('click', perform)
        e.stopPropagation();
    })
})

function perform() {
    alert(0)
}

Answer 2

クリック イベントが DOM を伝播してバブリングするためです。コードを次のように変更します。

$(function () {
    $('a').click(function (e) {
        e.stopPropagation();
        $(document).on('click', perform)
    })
})

jsFiddle の例

リンクは body 要素の子孫であるため、クリックすると実際に DOM を移動し、その祖先要素にバインドされたクリック イベントをトリガーします。.stopPropagation()リンクで使用することでこれを停止できます。

Answer 3

起こっていることは と呼ばれevent propagationます。要素でクリック イベントがトリガーされると、a要素documentがバインドされ、クリック イベントがドキュメントに伝達され、関数が実行されます。

これが起こらないようにするには、 を実行しますevent.stopPropagation();。これが行うことは、ブラウザーに伝えることです: このクリック イベントを伝播させないでください。

あなたのサンプルコードevent.stopPropagation();：

function perform() {
    alert(0);
}

$(function () { 
    $('a').click(function (event) {
        event.stopPropagation();

        $(document).bind('click',perform);
    });
});

ここに良いリンクがあります：Javascriptでのイベントの伝播