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。

如果我点击＆＃34;你好＆＃34;，理想情况下我只想要＆＃34;点击测试！＆＃34;出现在我的控制台中，以及＆＃34;点击文档！＆＃34;我点击第二次后出现。但是，两个日志消息都会出现，因为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;

Fiddle

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/

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

5 个答案: