javascript - 如何处理页面中任意位置的点击，即使某个元素停止了传播？

Question

我们正在开发一个包含旧代码的 JavaScript 工具，所以我们不能重写整个工具。

现在，添加了一个菜单，位置固定在底部，客户非常希望它有一个切换按钮来打开和关闭菜单，除了当用户开始在菜单外进行操作时关闭需要自动发生，例如，当用户返回页面并选择某些内容或单击表单字段时。

这在技术上可以与 body 上的 click 事件一起使用，在任何点击时触发，然而，旧代码中有许多项目，其中在内部链接上处理了点击事件，并且 return false 被添加到点击函数中，以便网站不会继续链接的 href 标签。

很明显，像这样的通用函数确实有效，但在单击返回 false 停止传播的内部链接时无效。

$('body').click(function(){
  console.log('clicked');
});

有没有办法强制执行正文点击事件，或者有没有其他方法可以让菜单消失，使用一些全局点击事件或类似的东西？

无需重写多年前创建的应用程序中的所有其他点击。这将是一项艰巨的任务，特别是因为我不知道如何重写它们，没有返回 false，但仍然不要让它们转到它们的 href。

Answer 1

现代 DOM 实现中的事件有两个阶段，捕获 和冒泡。捕获阶段是第一阶段，从文档的defaultView流向事件目标，接着是冒泡阶段，从事件目标流回defaultView。有关详细信息，请参阅 http://www.w3.org/TR/DOM-Level-3-Events/#event-flow .

要处理事件的捕获阶段，您需要将 addEventListener 的第三个参数设置为 true:

document.body.addEventListener('click', fn, true); 

遗憾的是，正如 Wesley 所提到的，事件的捕获阶段无法在旧版浏览器中可靠地处理，或者根本无法处理。

一个可能的解决方案是改为处理 mouseup 事件，因为点击的事件顺序是:

1. 鼠标按下
2. 鼠标弹起
3. 点击

如果您可以确定没有取消 mouseup 事件的处理程序，那么这是一种方法(并且可以说是更好的方法)。另一件需要注意的事情是，即使不是大多数(如果不是全部)，许多 UI 菜单会在鼠标按下时消失。