点击监听器阻止点击注册

Question

我添加了这个简单的事件侦听器（在我的浏览器扩展的

content.js

的上下文中）

document.addEventListener('click', (e) => {
  if (e.altKey) {
    console.log(e);
  }
}, true,)

这对于我点击的 90% 的元素都运行良好。这意味着单击会在元素中注册，如果我按住 Alt，它还会将事件记录到控制台中。

但是，某些网站上的某些按钮的行为有所不同。这里，当我不按住该键时，会记录点击，但如果我按住该键，则不会记录。 示例按钮：耐克鞋的颜色选择 (https://www.nike.com/t/air-max-dn-shoes-27XkSQ)

我尝试在窗口加载时注册侦听器，并尝试设置

useCapture = false

。

所以我的问题是，为什么会发生这种情况？有没有办法解决这个问题？ 非常感谢！

Answer 1

1. 删除

   document.

   或将其替换为

   window.

   ，这是侦听器通过在第三个参数中提供

   true

   使用的事件调度第一阶段的第一个目标。

2. 除了

   mousedown

   之外，还使用

   click

   。已经提前发出了。

3. 将

   "run_at":"document_start"

   添加到 manifest.json 中的

   content_scripts

   声明中，以便您的侦听器比网站的侦听器更早注册。

   请注意，此时没有

   head

   或

   body

   ，只有

   document.documentElement

   ，因此要等待页面内容，请使用

   MutationObserver

   或

   DOMContentLoaded

   监听器。

不要忘记在

chrome://extensions

中重新加载扩展。