Question

有没有一种方法来进行全局事件捕获，因此，如果元素具有click事件，并且使用了stopPropagation，则全局事件捕获仍会触发并运行自己的代码。

全局事件捕获是针对一个jquery插件的，该插件对页面上的其他jquery / javascript一无所知。

谢谢。

Answer 1

如果在您的代码有机会运行之前，在document中添加了类似的侦听器，并且和侦听器调用了stopImmediatePropagation，则无法使用此方法，但是幸运的是，这种事情很少见。

您需要做的就是在捕获阶段向document添加一个点击侦听器，以便您的侦听器尽快运行（它将在任何冒泡的侦听器之前运行触发，并且将在捕获捕获器之前运行，捕获捕获器在document上除外：

document.addEventListener(
  'click',
  () => {
    console.log('global click detected');
  },
  true // <-- very important: trigger listener in capturing phase
);

document.querySelector('#foo').addEventListener('click', (e) => {
  e.stopPropagation();
  console.log('foo clicked, stopPropagation called');
});

<div id="foo">click</div>

由于document上的捕获监听器调用了stopImmediatePropagation，因此“检测到的全局点击”无效的示例代码片段：

document.addEventListener(
  'click',
  (e) => {
    e.stopImmediatePropagation();
    e.stopPropagation();
  },
  true
);

// cannot intercept click now, due to stopImmediatePropagation
document.addEventListener(
  'click',
  () => {
    console.log('global click detected');
  },
  true
);

<div id="foo">click</div>

请注意，在捕获阶段添加侦听器无法使用jQuery-为此必须使用标准Javascript。

当您无法控制页面上的其他代码时，这种技术非常方便拦截事件。

使用jquery捕获所有click事件，而不管元素具有stopPropagation的click事件如何

1 个答案: