首页 > 文章 > 前端

防止重复点击导致元素消失的JS方法

时间：2025-09-21 20:42:53 122浏览收藏

## 防止重复点击元素消失的JS技巧：优化游戏开发体验还在为游戏开发中重复点击同一游戏格导致元素意外消失而烦恼吗？本文提供一种简洁有效的JS技巧，帮你轻松解决这一常见问题。告别复杂的布尔逻辑，利用CSS类和JavaScript事件监听，实现点击格子的状态切换和管理。本文将详细介绍实现步骤，提供HTML、CSS和JavaScript完整代码示例，核心思路是使用CSS类控制元素的显示和隐藏，避免重复触发点击事件导致状态错误切换，从而更简洁地解决这个问题。无论你是棋盘类还是网格类游戏的开发者，都能从本文中获益，提升用户体验，提高开发效率。立即学习，让你的游戏更流畅、更稳定！

防止重复点击同一格导致元素消失：基于JavaScript的游戏开发技巧

本文旨在解决在游戏开发中，如何防止用户重复点击同一游戏格导致元素意外消失的问题。通过使用CSS类和JavaScript事件监听，我们提供了一种简洁有效的方法，避免使用复杂的布尔逻辑，实现点击格子的切换和状态管理。本文将详细介绍实现步骤，并提供完整的代码示例，帮助开发者轻松解决这一常见问题。

在游戏开发中，特别是涉及到棋盘类或网格类游戏时，经常会遇到用户点击同一格子的元素后，该元素反而消失的情况。这通常是由于重复触发了点击事件，导致状态错误切换。本文将介绍一种使用CSS类来管理元素状态的方法，避免使用复杂的布尔变量，从而更简洁地解决这个问题。

核心思路：使用CSS类控制元素的显示和隐藏

我们的核心思路是使用CSS类来控制元素的显示与隐藏，而不是直接操作元素的innerHTML。具体来说，我们将使用一个名为 active 的CSS类来标记当前激活的格子，通过JavaScript来添加或移除这个类，从而控制格子上元素的显示状态。

实现步骤：

HTML结构调整：
首先，我们需要调整HTML结构，将格子内的元素（例如 "X"）包裹在一个 div 元素中，并赋予其 icon 类。
```
<div id="titre">Jeu de table</div>
<table border=1>
  <tr>
    <td onclick="deplacerPion(this)">
      <div class="icon active">X</div>
    </td>
    <td onclick="deplacerPion(this)">
      <div class="icon">X</div>
    </td>
  </tr>
</table>
```
注意：初始状态下，我们给第一个格子的 div 元素添加了 active 类，使其默认显示。

CSS样式定义：

接下来，我们需要定义CSS样式，控制 icon 类的默认隐藏，以及 active 类的显示。

td {
  height: 80px;
  width: 80px;
  text-align: center;
  font-size: 300%;
}

table {
  margin-left: auto;
  margin-right: auto;
}

#titre {
  text-align: center;
  font-size: 300%;
}

.icon {
  display: none; /* 默认隐藏 */
}

.active.icon {
  border: 1px solid #000;
  height: 80px;
  width: 80px;
  display: block; /* 当同时拥有 active 和 icon 类时，显示 */
}

关键点在于 .icon 默认 display: none;，而 .active.icon 设置 display: block;，只有同时拥有这两个类的元素才会被显示。

JavaScript事件处理：
最后，我们需要编写JavaScript代码，处理格子的点击事件。
```
function deplacerPion(x) {
  let active = document.querySelector(".icon.active"); // 获取当前激活的元素
  if (active) {
    active.classList.remove("active"); // 移除当前激活元素的 active 类
  }
  x.querySelector(".icon").classList.add("active"); // 给当前点击的格子的元素添加 active 类
}
```
这段代码首先通过 document.querySelector(".icon.active") 获取当前拥有 active 类的元素。如果存在，则移除其 active 类，使其隐藏。然后，给当前点击的格子的 div 元素添加 active 类，使其显示。

完整代码示例：

将上述HTML、CSS和JavaScript代码整合在一起，就是一个完整的可运行示例。

<!DOCTYPE html>
<html>
<head>
  <title>防止重复点击示例</title>
  <style>
    td {
      height: 80px;
      width: 80px;
      text-align: center;
      font-size: 300%;
    }

    table {
      margin-left: auto;
      margin-right: auto;
    }

    #titre {
      text-align: center;
      font-size: 300%;
    }

    .icon {
      display: none;
    }

    .active.icon {
      border: 1px solid #000;
      height: 80px;
      width: 80px;
      display: block;
    }
  </style>
</head>
<body>
  <div id="titre">Jeu de table</div>
  <table border=1>
    <tr>
      <td onclick="deplacerPion(this)">
        <div class="icon active">X</div>
      </td>
      <td onclick="deplacerPion(this)">
        <div class="icon">X</div>
      </td>
    </tr>
  </table>

  <script>
    function deplacerPion(x) {
      let active = document.querySelector(".icon.active");
      if (active) {
        active.classList.remove("active");
      }
      x.querySelector(".icon").classList.add("active");
    }
  </script>
</body>
</html>

注意事项：

确保CSS样式正确加载，否则可能导致元素无法显示。
document.querySelector 方法返回的是第一个匹配的元素，如果你的页面上有多个棋盘，需要更精确的选择器。
可以根据实际需求修改CSS样式，例如改变激活状态的边框颜色、背景颜色等。

总结：

通过使用CSS类来控制元素的显示和隐藏，我们可以避免使用复杂的布尔逻辑，更简洁地解决重复点击导致元素消失的问题。这种方法不仅代码更易于理解和维护，而且性能也更好。在游戏开发中，合理利用CSS类可以简化代码，提高开发效率。这种方法也适用于其他需要状态切换的场景，例如按钮的激活状态、菜单的展开与收起等。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。