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

Posted 2023-02-22

【中文标题】捕捉使用 jQuery 执行的任何点击

【英文标题】：Catching any click performed using 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，否则您会点击此处。

【讨论】：

+1，只是在写这个。当然，这假设没有其他点击处理程序使用event.stopPropagation() 取消冒泡。

event.stopPropagation() 非常有用！感谢您提供此内容

@Andy - +1 - 重要的一点，在你评论的时候补充一下：)

【参考方案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。

【讨论】：

感谢您提供的额外知识，非常有价值。

请注意，这将在 DOM 中的每个元素上绑定 click 事件处理程序，这将消耗更多内存并在页面运行时需要更多 CPU。