捕捉使用 jQuery 执行的任何点击答案

【问题标题】：Catching any click performed using jQuery捕捉使用 jQuery 执行的任何点击
【发布时间】：2011-03-17 16:24:36
【问题描述】：

我猜菜鸟的做法是

$('*').click(function(){...});

但是有什么方法可以捕获任何类型的点击，而无需为 DOM 中的每个对象注册一个侦听器？

帮助将是惊人的。 =)

【问题讨论】：

【解决方案1】：

click 事件默认为bubble up the DOM，因此您只需将click 处理程序附加到根，如下所示：

$(document).click(function() {
  //do something
});

除非沿途元素上的处理程序执行event.stopPropagation() 或return false，否则您会点击此处。

【讨论】：

【解决方案2】：

您可以在文档上使用事件委托来捕获所有点击。

jQuery 将填充event 的target 属性以检索被点击的元素。

$(document).click(function(event){
  // event.target is the clicked object
});

请注意，event.target 将是点击最深的元素。例如：如果<a> 中有<span>，您将得到<span>，而不是<a>。

如果您想捕捉任何点击但又想检索特定元素（如类），您可以这样做：

$(document).click(function(event){
  $(event.target).closest(".clickable").each(function(){
    // "this" is your "clickable" clicked
  });
});

除非沿途元素上的事件处理程序执行event.stopPropagation() 或return false，否则您会点击此处。

【讨论】：

感谢这是一个了不起的回复，感谢您提供的信息不是必需的，但非常有用！如果您还可以添加“event.stopPropagation()”事实，我很乐意勾选这个答案 =D
我相信.closest() 只会返回一个父对象，因此没有必要使用.each()。
@fudgey - 这取决于使用情况，例如 $(this).plugin({ option: this.id }); 不能被链接（this 将是错误的元素），但很好地存在于 .each() 闭包中。
@fudgey .closest() 实际上可能返回一个空的 jQuery，所以使用 .each() 是使用 if 测试返回值是否存在的捷径
如果你想在点击某个元素时停止事件：if ($(event.target).closest('#myElement').length > 0 ) { event.stopPropagation(); }

【解决方案3】：

怎么样：

$('body').click(function(){...});

任何点击都会在 body 上，因为它是 dom 中所有可见节点的父节点。

【讨论】：

看起来在 jQuery 3 中 .click(function(){...}); 已被弃用，您需要使用 $(document).on('click', 'body', function(){});

【解决方案4】：

给正文添加一个点击怎么样？

$('body').click(function(e){ ... })

e.target 应该包含被点击的内容

【讨论】：

【解决方案5】：

$('*').click( function() {...} ) 只会捕获对您调用.click() 时存在的元素的点击。要捕获对稍后可能创建的元素的点击，您需要按照其他人的建议绑定到 body 或 document。

【讨论】：