jQuery：在所有点击事件发生之前捕获它们？答案

【问题标题】：jQuery: Trap all click events before they happen?jQuery：在所有点击事件发生之前捕获它们？
【发布时间】：2011-09-03 16:33:06
【问题描述】：

在我的页面上，我有很多响应点击事件的各种元素。有时我需要根据一些全局标志阻止所有点击。有没有办法让我在一个集中的位置进行这项检查？

现在在每个事件中我都会检查标志，例如：

var canClick = false; // Global flag

// Sample click event:
$("#someDiv").click(function(){
  if(!canClick) return;

  // Some stuff ...
});

我想做的是有一个元素可以在任何其他元素之前捕获所有点击事件。

我尝试在 document 上执行此操作，但这些事件仅在其他点击事件之后发生。

例子：

$("#someDiv").click(function(){ console.log("someDiv click"); });

$(document).click(function(){ console.log("Document click"); });

// When I click on the someDiv element it prints:
> someDiv click
> Document click

我还尝试在所有内容之上放置一个全屏 div，并使用它来捕获事件，但问题是没有任何点击通过这个全屏 div 传播。此外，我不想依赖创建额外的元素来捕获点击，因为这感觉有点 hacky。

我可以覆盖 jQuery 的 click 函数，以便我可以把我的小检查放在那里吗？

我在这里遗漏了什么明显的东西吗？

感谢您的帮助。

【问题讨论】：

标签： jquery events click propagation

【解决方案1】：

使用注入 Javascript：

view.loadUrl(
                    "javascript:(function() {"


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

                            + "})()"
            );

【讨论】：

这并没有提供问题的答案。请edit您的答案，以确保它改进了此问题中已经存在的其他答案。
请考虑在您的答案中添加一些解释或细节。虽然它可能会回答问题，但只是添加一段代码作为答案，并不能帮助 OP 或未来的社区成员理解问题或建议的解决方案。

【解决方案2】：

是的，使用 .addEventListener() 并将第三个选项设置为 true。这会将侦听器绑定到捕获阶段并在执行其他任何操作之前执行该函数。

这是一个示例，它将停止所有点击处理程序的执行：

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

在这里查看它的实际效果：

http://jsfiddle.net/wLwMh/1/

【讨论】：

啊，太棒了！非常感谢好心的先生。在 Chrome 11 中工作，这是我需要它兼容的唯一浏览器。干杯。
对于任何需要跨浏览器兼容性的人，IE 不支持此功能
如何对元素执行此操作？

【解决方案3】：

您可以捕获所有点击事件，然后触发一个自定义事件，在您检查后绑定您的侦听器

$("#someDiv").bind('awesomeEvent', function() {
    //do stuff here
}

$(*).click(function() {
    if(canClick) {
        $(this).trigger('awesomeEvent');
    }
}

编辑我应该提一下，从性能的角度来看，使用 $(*) 选择器并不是一个好主意。你真的应该尝试以某种方式缩小范围。

【讨论】：