谷歌插件 - 单个元素的监听事件被全局监听事件覆盖了怎么办?

作者站长头像
站长
· 阅读数 10

在开发一个谷歌浏览器插件,已有的功能都是通过点击按钮实现的 : 界面内有很多按钮,每个对应不同的功能。所以直接监听了整个document的click事件。document.addEventListener('click'...)现在想在插件界面内加一个checkbox,发现它的监听事件没有起作用,checkbox无法勾选。用onclick实现也不行。

document.getElementById('ispopup').addEventListener('click'...)

但是如果把document.addEventListener这一句注释掉,checkbox就可以正常勾选。有没有人知道是什么原因?addEventListener()不是不会被覆盖吗?

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('ispopup').addEventListener('click', function (){
    /*.....*/
    });
});

document.addEventListener('click', handleButton, false)

async function handleButton (event) {
/*.....*/
}
回复
1个回答
avatar
test
2024-06-28

Hello,代码还再补充一点吗?试了一下没这个问题诶,你对照着看看呢

<html lang="en">
  <head>
    <title>listener</title>
    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function () {
        document
          .getElementById("tmp")
          .addEventListener("click", function () {
            console.log("click")
          });
      });

      document.addEventListener("click", handleButton, false);

      async function handleButton(event) {
        console.log("handleButton")
      }
    </script>
  </head>

  <body>
    <input type="checkbox" id="tmp"><label for="tmp">Hello</label>
  </body>
</html>

希望能帮助到你。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容