使用jQuery单击按钮后添加文档单击侦听器_Jquery

使用jQuery单击按钮后添加文档单击侦听器

jquery

使用jQuery单击按钮后添加文档单击侦听器,jquery,Jquery,我试图在页面上的某个按钮被单击后添加一个jQuery click监听器。单击按钮后，单击页面上的任意位置，脚本将运行。问题是处理程序在您单击按钮后立即运行，而不是等待“body”单击。代码如下： <html> <head> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> </head> <body> <butto

我试图在页面上的某个按钮被单击后添加一个jQuery click监听器。单击按钮后，单击页面上的任意位置，脚本将运行。问题是处理程序在您单击按钮后立即运行，而不是等待“body”单击。代码如下：

<html>
<head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>

<body> 
    <button data-stat="off" onclick="handler(this);">Click here</button>

</body>
    <script>
    function handler(btn){
        if ($(btn).attr("data-stat")=="on"){
            $(btn).attr("data-stat", "off");
            console.log("A");
        }
        else {
            $(btn).attr("data-stat", "on");
            $(document).on("click", function (event) {
                console.log("body clicked!");
                $(this).unbind();
            });
        }     
    }
    </script>
</html>


点击这里
函数处理程序（btn）{
如果（$（btn）.attr（“数据统计”）=“打开”）{
$（btn）.attr（“数据统计”、“关闭”）；
控制台日志（“A”）；
}
否则{
$（btn）.attr（“数据统计”、“打开”）；
$（文档）。在（“单击”）上，函数（事件）{
log（“body clicked！”）；
$（this.unbind（）；
});
}     
}

我认为应该在当前事件循环之后添加超时以附加侦听器：

function handler(btn){
    if ($(btn).attr("data-stat")=="on"){
        $(btn).attr("data-stat", "off");
        console.log("A");
    }
    else {
        $(btn).attr("data-stat", "on");

        // add after 1 ms
        setTimeout(function() {
            $(document).on("click", function (event) {
                console.log("body clicked!");
                $(this).unbind();
            });
        }, 1);
    }     
}

事件在DOM中冒泡，因此当您将新事件处理程序附加到父元素时，它将立即调用。有一个名为

stopPropagation（）

的方法将停止事件冒泡。只需将其添加到

处理程序（）

方法中即可

<html>
<head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>

<body> 
    <button data-stat="off" onclick="handler(this, event);">Click here</button>

</body>
    <script>
    function handler(btn, ev){
        ev.stopPropagation();

        if ($(btn).attr("data-stat")=="on"){
            $(btn).attr("data-stat", "off");
            console.log("A");
        }
        else {
            $(btn).attr("data-stat", "on");
            $(document).on("click", function (event) {
                console.log("body clicked!");
                $(this).unbind();
            });
        }     
    }
    </script>
</html>


点击这里
函数处理程序（btn，ev）{
ev.stopPropagation（）；
如果（$（btn）.attr（“数据统计”）=“打开”）{
$（btn）.attr（“数据统计”、“关闭”）；
控制台日志（“A”）；
}
否则{
$（btn）.attr（“数据统计”、“打开”）；
$（文档）。在（“单击”）上，函数（事件）{
log（“body clicked！”）；
$（this.unbind（）；
});
}     
}

是否在“页面上的任何位置”中再次单击原始按钮？（关于

.unbind（）

，您可以使用

.one（）

而不是

.on（）

，解除绑定将自动进行。）