Javascript 阻止新创建的单击事件运行

这是我遇到的问题的一个简化示例。假设我有这个HTML：

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

下面是这个例子的一个例子

---

如果我单击“Hello”，理想情况下，我只希望“Clicked test！”出现在我的控制台中，并且在第二次单击后“Clicked on document！”出现。但是，当单击事件冒泡到

文档

对象并运行此新的单击事件时，会显示两条日志消息。有没有一种方法可以防止这种情况发生，而不使用

stopPropagation

，这可能会产生其他意外的副作用？

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

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

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

    return true;
});

---

请参阅修改后的小提琴：

或使用带选择器的on和off：

$(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)

}

编辑：要每次进行测试并单击，请执行以下操作：

$(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)

}

---

假设在第三次单击时不会发生任何事情，请在

单击处理程序的末尾添加以下两行：

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

您可以使用一个类来标记元素是否被单击

$("#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');   
    }
});

如果您想单击“Hello”一次，然后继续单击文档

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

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

这不只是取决于事件是否足够迅速地爆发吗？如果您有一个巨大的文档，并且
#test
被隐藏在某个地方，或者如果您的浏览器落后了怎么办？文档
单击
处理程序不可能仍然运行吗？返回true”会将事件标记为已处理，因此只要在该行执行之前没有运行超时函数，您就可以了。如果超时值与您有关，您可以增加超时值，但这应该足够了。这似乎没有提供所需的功能。只有在第一次单击测试时才会打印“clicked test！”行。此后，只打印“点击文档！”。哦，我还以为这是你想要的。请参见“编辑”，它当时稍微复杂一些，但仍然有效。
$( "div" ).one( "click", function() {
console.log("Clicked test!");
    event.stopPropagation();
});

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