如何高效统计Grid中单个特定tile的点击次数

核心解决思路 #

1. 事件委托：不给每个网格元素单独绑定点击事件，而是给父容器绑定一次事件，通过事件冒泡判断点击目标，彻底解决重复代码问题，支持任意数量的tile。
2. 独立计数存储：给每个tile分配唯一标识，用Map或元素自身的dataset属性存储独立的点击次数，避免共用计数器的问题。

代码实现（支持动态生成100个tile） #

HTML结构

<div class="grid-container" id="gridContainer">
  <!-- 网格元素将通过JS动态生成 -->
</div>

CSS（基础样式，可按需调整）

.grid-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  padding: 16px;
}
.grid-item {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}
.click-count {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}

JavaScript实现（两种可选方案）

方案1：用Map存储计数（适合需要在其他逻辑中复用计数的场景）

// 1. 动态生成100个网格元素
const gridContainer = document.getElementById('gridContainer');
for (let i = 1; i <= 100; i++) {
  const tile = document.createElement('div');
  tile.className = 'grid-item';
  tile.dataset.tileId = i; // 给每个tile分配唯一ID
  tile.innerHTML = `
    <div>Tile ${i}</div>
    <div class="click-count">点击次数: 0</div>
  `;
  gridContainer.appendChild(tile);
}

// 2. 初始化计数存储Map
const clickCounts = new Map();
document.querySelectorAll('.grid-item').forEach(tile => {
  clickCounts.set(tile.dataset.tileId, 0);
});

// 3. 事件委托处理点击
gridContainer.addEventListener('click', (e) => {
  // 找到点击的网格元素（避免点击内部子元素时出错）
  const targetTile = e.target.closest('.grid-item');
  if (!targetTile) return;

  const tileId = targetTile.dataset.tileId;
  // 更新计数
  const newCount = clickCounts.get(tileId) + 1;
  clickCounts.set(tileId, newCount);
  // 更新页面显示
  targetTile.querySelector('.click-count').textContent = `点击次数: ${newCount}`;
});

方案2：用dataset直接存储计数（更简洁，适合简单场景）

// 1. 动态生成100个网格元素
const gridContainer = document.getElementById('gridContainer');
for (let i = 1; i <= 100; i++) {
  const tile = document.createElement('div');
  tile.className = 'grid-item';
  tile.dataset.clickCount = 0; // 直接在元素上初始化计数
  tile.innerHTML = `
    <div>Tile ${i}</div>
    <div class="click-count">点击次数: 0</div>
  `;
  gridContainer.appendChild(tile);
}

// 2. 事件委托处理点击
gridContainer.addEventListener('click', (e) => {
  const targetTile = e.target.closest('.grid-item');
  if (!targetTile) return;

  // 读取并更新计数
  let currentCount = parseInt(targetTile.dataset.clickCount);
  currentCount++;
  targetTile.dataset.clickCount = currentCount;
  // 更新页面显示
  targetTile.querySelector('.click-count').textContent = `点击次数: ${currentCount}`;
});

方案优势 #

• 扩展性极强：不管是10个还是1000个tile，只需要修改循环的终止值，无需额外修改事件绑定代码。
• 性能更优：事件委托只绑定一次事件，避免大量重复的事件监听占用内存。
• 计数完全独立：每个tile的计数存储在独立的位置，不会出现点击一个tile所有计数都增加的问题。

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