jQuery绑定Document Click事件对部分元素无效，如何实现全页面点击触发？

嘿，这个问题我太熟了！那些像Bootstrap下拉菜单、chosen.js这类UI组件，往往会在内部的点击事件里调用event.stopPropagation()来阻止事件冒泡到document层面，这就是为啥你的document点击事件没触发。不过别担心，有个简单的办法能绕过这个限制——利用事件捕获机制。

事件传播分为两个阶段：捕获阶段（从顶层document/Window向下到目标元素）和冒泡阶段（从目标元素向上回到document）。那些UI组件阻止的是冒泡阶段的传播，但捕获阶段的事件依然会触发。

方法1：jQuery实现捕获模式 #

jQuery的on()方法支持第三个参数传布尔值true，用来指定事件处理函数在捕获阶段执行，这样即使子元素阻止了冒泡，document的捕获事件依然能被触发：

$(document).on('click', function (e) {
    alert('任意点击都触发啦！');
}, true); // 这个true是关键，开启捕获模式

方法2：原生JavaScript实现（兼容性更稳定） #

如果担心jQuery版本的兼容问题，直接用原生的addEventListener更可靠，同样通过第三个参数true开启捕获：

window.addEventListener('click', function(e) {
    alert('任意点击都触发啦！');
}, true);

为什么这招管用？ #

因为stopPropagation()只会阻止事件在冒泡阶段向上传递，而捕获阶段是从顶层向下遍历DOM，所以你的document/window捕获事件会在组件的事件处理之前就被触发，完全不受组件的阻止逻辑影响。

内容的提问来源于stack exchange，提问作者John