阻止运行新创建的点击事件

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。

如果我点击 "Hello"，理想情况下我只希望 "Clicked test!" 出现在我的控制台中，而 "Clicked on document!" 在我第二次点击后出现。但是，随着点击事件冒泡到 document 对象并运行这个新的点击事件，两条日志消息都会出现。有没有办法在不使用 stopPropagation 的情况下防止这种情况发生，这可能会产生其他意想不到的副作用？

Answer 1

我的解决方案有点老套，但确实有效。如果您异步设置文档点击处理程序，则事件不会冒泡：

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

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

    return true;
});

查看修改后的fiddle：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;

Fiddle

Answer 4

您可以使用 class 标记元素是否已被单击。

$("#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

如果你想点击一次你好然后留在文档上。

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

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

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

阻止运行新创建的点击事件

Prevent newly created click event from running

javascript

jquery

javascript-events

阻止 运行 新创建的点击事件

Prevent newly created click event from running

javascript

jquery

javascript-events

阻止运行新创建的点击事件