Javascript 如何在JQuery中取消文档中的所有单击事件

如何取消HTML文档中的所有单击事件

我有一个Webapp，用户需要在继续之前接受一条消息。 这个想法是，当用户点击其他地方时，消息会闪烁或试图吸引用户的注意力

该应用程序旨在供使用IE8和up+现代浏览器的政府使用，这就是为什么我希望有一个jquery解决方案

当时，我试着：

失败的解决方案1 希望返回false或事件停止传播会停止单击，但我发现事件从Dom元素冒泡到文档，所以Dom元素无论如何都会触发单击

失败的解决方案2 我在纯JS中找到了一个解决方案：

document.addEventListener('click', function(e) {
    e.stopPropagation();
}, true);

使用true作为第三个参数会将侦听器绑定到捕获阶段，并在执行其他任何操作之前执行该函数，但这在IE中不起作用

失败的解决方案3 使用覆盖整个文档的div，这对其他人来说可能是一个解决方案，但在这个精确的场景中不是这样，因为错误消息（需要可单击）位于一个复杂的结构中（所有内容都在移动，css将所有内容保持在原位）。 将此元素移动到覆盖div的顶部，使其成为唯一可单击的解决方案是一个不错的解决方案，但在本例中不是

我不一定需要一个解决方案来获得IE中的气泡前点击事件（尽管这会很好），如果我能找到一个技巧或解决方法，我可以接受它。有什么想法吗

工作方案3 我最终使用了失败的解决方案3，并添加了一个表示消息边界的假命中区域。 我不验证正确的边界，因为消息总是接触浏览器窗口的右侧

$('#screencurtain').click(function(event)
{  
    event.stopImmediatePropagation();
    if(event.clientX > $('#messages').offset().left  &&  event.clientY > $('#messages').offset().top && event.clientY < $('#messages').offset().top + $('#messages').height())
    {
        $('#screencurtain').hide();
        $('#messages').click();
    }
    else
    {
        $('.alertbox').effect('pulsate');
    }
});

$（“#屏幕幕布”）。单击（功能（事件）
{  
事件。stopImmediatePropagation（）；
if（event.clientX>$（'#messages'）.offset（）.left&&event.clientY>$（'#messages'）.offset（）.top&&event.clientY<$（'#messages'）.offset（）.top+$（'#messages'）.height（））
{
$（“#屏幕窗帘”）.hide（）；
$（“#消息”）。单击（）；
}
其他的
{
$（'.alertbox'）.effect（'pulsate'）；
}
});

这可能对您有更多帮助：-

$(function() {

$('div').click(function() {
   alert('div1'); 
});

document.addEventListener('click', function(e) { 
    alert('document');
    e.stopPropagation();
}, true);

$('div').click(function() {
   alert('div2'); 
});

});

---

您可以在整个屏幕上放置一个透明的div

var screenWidth = $(window).width(), screenHeight = $(window).height();

$("<div>").width(screenWidth).height(screenHeight).css({ 
    zIndex : 100000
}).appendTo("body");

//Disables scrolling if exists
$("html, body").css({ 'overflow' : '100%', 'height' : '100%' });

var screenWidth=$（window.width（），screenHeight=$（window.height（）；
$（“”）。宽度（屏幕宽度）。高度（屏幕高度）。css（{
zIndex:100000
}).附于（“主体”）；
//如果存在，则禁用滚动
$（“html，body”）.css（{'overflow'：'100%，'height'：'100%}）；

我想你应该看看.off（）

如果您有这样的单击事件：

$("#selector").on('click', function(){
    //do something here
});

$("#selector").off();

您可以随时执行此操作并删除单击处理程序：

$("#selector").off('click');

或者，要从选择器中删除所有事件，例如单击鼠标键、鼠标移动、悬停等，只需保留空白，如下所示：

$("#selector").on('click', function(){
    //do something here
});

$("#selector").off();

---

通过这种方式，您可以从某些元素中删除单击事件，然后在需要时重新启用它们。

您第一次尝试时几乎成功了。试试这个

$(document).on("click", "*", function(event){
    event.stopImmediatePropagation();
    event.preventDefault();
    $('.alertbox').effect('shake');
});

---

真正的问题是，当您希望能够再次单击内容时。

在整个文档上放置一个透明元素。但是，如何检测用户单击消息？单击消息可以解决此问题并使应用程序再次可用。将消息放置在透明元素顶部的元素中。使用

modal:true

@KevinB的jqueryui对话框就是一个很好的例子。这是通过在文档的其余部分上使用一个层来解决的。到处都很普遍。消息将位于该层之上，因此您可以检测到该层上的点击。这在问题的上下文中是正确的，但是消息位于css结构中，不能位于其他结构之上。。抱歉：）它的位置在布局中是必需的这是问题注释背后的想法，但我无法将可单击的div移到这个新div的顶部。@VincentDuprez您可以暂时将消息

div

移到顶部，然后将其返回到原始位置，当用户离开消息时，只需将clickable div的z-index属性增加到100001即可。通过这种方式，可单击div将位于透明div的顶部，以确保完整性：

$（'*'）。如果不确定哪些元素的事件有界，则关闭（'click'）

将解除它与所有元素的绑定。但在大型DOM中可能会非常慢，所以使用时要自担风险。@Rene Wolferink，它不会处理被点击的链接。实际上，您需要做相反的事情，捕获所有内容的单击事件，并使用

preventDefault（）

来停止任何事情的发生：）正如Archer所说，一旦删除blocade，我将使用off方法来删除文档单击处理程序。（如果我使用一个文档点击处理程序…@VincentDuprez，你只需要稍微修改一下它就可以使用jQuery工作了。有趣的是，我会尝试一下，其他元素的点击操作仍然会被触发。