如何防止事件监听器被调用两次

Question

在 highcharts 的渲染方法中由 className 检索的 HTML 元素上添加了事件监听器，但该监听器被调用了两次。请检查以下调用点击事件的代码。

1. 在 xAxis 标签格式化程序的 highchart 的 xAxis 上添加了链接。

   

2. 在 highchart 的渲染中添加了 onClick 处理程序

   

但是不知何故这个处理程序被调用了两次。我在下面添加了多种解决方案，但它不起作用。

解决方案：

1. 添加了

   e.stopPropagation()

   和

   e.preventDefault()

   但没有用。

2. 低于

   {once: true}解决方案无效

   label.addEventListener('点击', (e) => {

   console.log('点击事件'); }, {一次: 真});
   

3. 删除事件侦听器仍然点击函数被调用。

有人可以提供解决方案以避免事件侦听器被调用两次。

Answer 1

您可以在方法选项对象中传递一次，这将在第一次为 eg

触发时删除 eventListener

let btn = document.querySelector("button")
btn.addEventListener('click', () => {
    console.log("Logged");
}, { once: true });