JavaScript 中点击事件触发两次的解决方法

在 JavaScript 中，点击事件有时会意外触发两次。以下是一些常见的解决方法：

1. 使用事件捕获和冒泡

• 在事件捕获阶段，事件从窗口对象向下传播到目标元素。
• 在事件冒泡阶段，事件从目标元素向上传播到窗口对象。
• 在事件捕获阶段添加一个事件监听器，并在事件冒泡阶段删除它。这将防止事件再次触发。

代码：

element.addEventListener('click', function(event) {  // 事件捕获阶段逻辑}, true);element.addEventListener('click', function(event) {  // 事件冒泡阶段逻辑}, false);

2. 使用事件委托

• 事件委托将事件监听器附加到父元素而不是目标元素上。
• 当子元素触发事件时，父元素的事件监听器也会被触发。
• 父元素的事件监听器可以检查目标元素是否与预期目标匹配，并相应地处理事件。

代码：

parentElement.addEventListener('click', function(event) {  if (event.target === targetElement) {    // 目标匹配逻辑  }}, false);

3. 使用节流函数

• 节流函数限制函数在特定时间间隔内只能执行一次。
• 这样，如果点击事件快速触发多次，节流函数会确保只触发一次事件处理程序。

代码：

function throttle(func, delay) {  let timer = null;  return function() {    if (!timer) {      func();      timer = setTimeout(() => timer = null, delay);    }  };}element.addEventListener('click', throttle(eventHandler, 500), false);

4. 检查事件类型

• 某些浏览器可能会触发两个 click 事件，一个由鼠标按钮触发，另一个由触摸事件触发。
• 检查事件类型以确保仅处理所需的事件。

代码：

element.addEventListener('click', function(event) {  if (event.type === 'mousedown') {    // 鼠标按钮点击逻辑  }}, false);

以上就是js中点击事件触发了两次怎么办的详细内容，更多请关注css网站其它相关文章！