Question

我点击按钮后添加一个事件：

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

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

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

然后在测试过程中，我单击按钮，然后运行turnOn方法，但是该初始单击也将运行文档单击侦听器。

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

Answer 1

这是由于事件冒泡引起的。单击<button>时，将eventListener附加到主体上，然后由于冒泡而将其调用。
您可以使用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>

单击时添加了事件侦听器，但立即运行吗？

1 个答案:

不工作

工作