时间戳

首页 > 解决方案 > 如果我的容器 div 中的任何 div 被点击，我将如何检查 javascript

javascript - 如果我的容器 div 中的任何 div 被点击，我将如何检查 javascript

问题描述

您好，我正在开始一个井字游戏，我不确定如何检查我的棋盘 div 中的任何元素是否在 javascript 中被点击。任何帮助将非常感激。

<div class="board">
        <div class="box" data-index='0'></div>
        <div class="box" data-index='1'></div>
        <div class="box" data-index='2'></div>
        <div class="box" data-index='3'></div>
        <div class="box" data-index='4'></div>
        <div class="box" data-index='5'></div>
        <div class="box" data-index='6'></div>
        <div class="box" data-index='7'></div>
        <div class="box" data-index='8'></div>
    </div>

标签： javascripthtml

解决方案

在外部使用事件监听div器来监听点击。然后使用事件目标来确定哪个被点击了。要查找索引，请使用dataset获取data-index值。

document.querySelector('.board').addEventListener('click', which);

function which(event) {
  alert(`Index ${event.target.dataset.index} got clicked!`);
}
.box {
  width: 15px;
  height: 15px;
  border: 1px solid darkblue;
  background-color: lightblue;
}
<div class="board">
  <div class="box" data-index='0'></div>
  <div class="box" data-index='1'></div>
  <div class="box" data-index='2'></div>
  <div class="box" data-index='3'></div>
  <div class="box" data-index='4'></div>
  <div class="box" data-index='5'></div>
  <div class="box" data-index='6'></div>
  <div class="box" data-index='7'></div>
  <div class="box" data-index='8'></div>
</div>

推荐阅读