阻止新創建的單擊事件運行

Question

這是我遇到的問題的簡化示例。 說我有這個HTML：

<div id="test">Hello</div>

我有以下事件處理程序附加到此div ：

$("#test").on("click", function() {
    console.log("Clicked test!");

    $(document).one("click", function() {
        console.log("Clicked on document!");
    });
});

這是這個例子的jsFiddle 。

如果我點擊“你好”，理想情況下我只想要“點擊測試！” 出現在我的控制台中，以及“單擊文檔！” 我點擊第二次后出現。 但是，兩個日志消息都會出現，因為click事件會冒泡到document對象並運行此新的單擊事件。 有沒有辦法防止這種情況發生而不使用stopPropagation ，這可能有其他意外的副作用？

Answer 1

我的解決方案有點像hacky，但確實有效。 如果您異步設置文檔單擊處理程序，則事件不會冒泡：

$("#test").on("click", function(e) {
    console.log("Clicked test!");

    setTimeout(function(){
        $(document).one("click", function() {
            console.log("Clicked on document!");
        });
    }, 10);

    return true;
});

看到修改過的小提琴： https ： //jsfiddle.net/voveson/qm5fw3ok/2/

Answer 2

或者使用選擇器打開和關閉：

$(document).on("click", "#test", add_doc_click)

function add_doc_click() {
    console.log("Clicked test!");
    $(document).on("click", function (e) {

        console.log("Clicked on document!");
    })
    $(document).off("click", "#test", add_doc_click)

}

https://jsfiddle.net/y2q1gocu/

編輯：進行測試並點擊每次：

$(document).on("click", "#test", add_doc_click)

function add_doc_click() {
    console.log("Clicked test!");
    $(document).on("click", function (e) {

        console.log("Clicked on document!");

    })
    $(document).on("click", "#test", function (e) {

        console.log("Clicked test!");

    })
    $(document).off("click", "#test", add_doc_click)

}

https://jsfiddle.net/y2q1gocu/1/

Answer 3

假設在第三次單擊時不會發生任何事情，請在click處理程序的末尾添加以下兩行：

$(this).off('click');
return false;

小提琴

Answer 4

您可以使用標記元素是否已被單擊的類。

$("#test").on("click", function(e) {
    console.log("Clicked test!");

    if($(this).hasClass('clicked')){
        $(document).one("click", function(e) {
            console.log("Clicked on document!");
        });
    }else{
         $(this).addClass('clicked');   
    }
});

Answer 5

如果你想單擊Hello一次然后保留在文檔上。

$( "div" ).one( "click", function() {
console.log("Clicked test!");
    event.stopPropagation();
});

 $(document).on("click", function() {
        console.log("Clicked on document!");
    });

https://jsfiddle.net/qm5fw3ok/3/