JavaScript双击事件函数问题：元素点击未先高亮直接删除

问题描述 #

现有点击事件逻辑运行基本正常，但存在以下问题：当依次点击第一个元素、第二个元素，再点击第一个元素时，会跳过高亮步骤直接执行删除操作。需求为：对元素的第二次点击（切换元素后再次点击原元素的情况）需先显示高亮效果，再次点击才将该元素从DOM中删除，而非直接删除。

原代码 #

HTML #

<button class="cancelBtn">Cancel highlighting</button>
<div>
    <a href="#" class="btn">Button</a>
    <a href="#" class="btn">Button</a>
    <a href="#" class="btn">Button</a>
    <a href="#" class="btn">Button</a>
    <a href="#" class="btn">Button</a>
    <a href="#" class="btn">Button</a>
</div>
<style>
    .btn.click {
        background-color: red;
    }
</style>

JavaScript #

function doubleClickEvenElements(eventElements, cancelHighlightingElement) {
  eventElements.forEach(eventElement => {
    let count = 0;
    eventElement.addEventListener("click", element => {
      element.target.classList.add("element");
      eventElements.forEach(ele => {ele.classList.remove("click");});
      element.target.classList.add("click");
      count++;
      if (count == 2) {
        element.target.remove();
        count = 0;
      };
    });
    cancelHighlightingElement.addEventListener("click", btn => {
      count = 0;
      eventElements.forEach(ele => {ele.classList.remove("click");});
    });
  });
};

let eventElements = document.querySelectorAll("div .btn");
let cancelHighlighting = document.querySelector(".cancelBtn");

doubleClickEvenElements(eventElements, cancelHighlighting);

修复后的代码 #

JavaScript #

function doubleClickEvenElements(eventElements, cancelHighlightingElement) {
  // 初始化每个元素的点击计数
  eventElements.forEach(eventElement => {
    eventElement.dataset.clickCount = 0;
  });

  eventElements.forEach(eventElement => {
    eventElement.addEventListener("click", element => {
      // 重置所有元素的高亮状态和点击计数
      eventElements.forEach(ele => {
        ele.classList.remove("click");
        ele.dataset.clickCount = 0;
      });

      // 高亮当前点击的元素
      element.target.classList.add("click");

      // 更新当前元素的点击计数
      let currentCount = parseInt(element.target.dataset.clickCount) + 1;
      element.target.dataset.clickCount = currentCount;

      // 连续点击同一元素两次时执行删除
      if (currentCount === 2) {
        // 延迟执行删除，确保高亮状态先渲染
        setTimeout(() => {
          element.target.remove();
        }, 0);
      }
    });
  });

  // 取消高亮按钮逻辑
  cancelHighlightingElement.addEventListener("click", () => {
    eventElements.forEach(ele => {
      ele.classList.remove("click");
      ele.dataset.clickCount = 0;
    });
  });
};

let eventElements = document.querySelectorAll("div .btn");
let cancelHighlighting = document.querySelector(".cancelBtn");

doubleClickEvenElements(eventElements, cancelHighlighting);

修复说明 #

1. 统一管理点击计数：将原本每个元素的局部count变量转移到元素的dataset.clickCount属性中，方便全局重置和访问。
2. 切换元素时重置计数：点击任意元素时，先重置所有元素的高亮状态和点击计数，确保切换元素后，之前元素的计数清零，不会保留累加值。
3. 调整删除触发逻辑：只有连续点击同一元素两次（计数达到2）时才执行删除操作，切换元素后再次点击原元素会重新从计数1开始，先显示高亮，再次点击才删除。
4. 优化取消高亮逻辑：移除了重复绑定的取消事件（原代码中每个元素都绑定了一次取消事件，现在只绑定一次），避免不必要的性能消耗。

内容的提问来源于stack exchange，提问作者Ahmed Nasser