时间戳

首页 > 解决方案 > 单击时添加事件侦听器但立即运行？

javascript - 单击时添加事件侦听器但立即运行？

问题描述

我在单击按钮时添加一个事件：

this.$refs.btn.addEventListener('click', this.turnOn);

在turnOn方法中，我在文档上添加了一个侦听器，以运行该turnOff方法。

turnOn() {
    document.addEventListener('click', this.turnOff);
}

然后在测试期间，我单击按钮并turnOn运行该方法，但初始单击也运行文档单击侦听器。

如何运行该turnOn方法，添加文档侦听器，但在初始按钮单击时不运行文档单击侦听器？

标签： javascript

解决方案

这是由于事件冒泡。当您单击事件<button>监听器时，它会附加到主体，然后由于冒泡而被调用。
您可以使用event.stopPropgation(). 下面是两个片段，可以看出区别。

非工作

document.querySelector('button').addEventListener('click',(e)=>{
  document.addEventListener('click',()=>console.log("body clicked"));
  console.log("button clicked")
})
<body>
<button>Test</button>
</body>

注意：上面的非工作示例还在每次点击测试时添加了多个点击事件

在职的

document.querySelector('button').addEventListener('click',(e)=>{
  e.stopPropagation();
  document.addEventListener('click',()=>console.log("body clicked"));
  console.log("button clicked")
})
<body>
<button>Test</button>
</body>

推荐阅读