为什么事件监听器“点击”显示的是“body”元素而不是我点击的元素？

Question

我去了 chessboard.js https://chessboardjs.com/examples#5000 ，打开开发工具并粘贴以下代码

document.body.addEventListener(`click`, a1);
function a1(){
   console.dir(event.target);
}

当我点击一个空的国际象棋方格或一个有黑色棋子的方格时，控制台打印出正确的结果（例如，“div#e5-b9f9-a5bc-69e1-3e5a-4b82-b2bc-ffe4-966c.square- 55d63.black-3c85d.square-e5").

但是当我点击一个上面有白色方块的正方形时，控制台打印出“body”。 当我右键单击同一个方块并选择“检查”时，它在开发人员工具的“元素”部分的“div”元素内正确显示了一个“img”元素（例如，<div class="square-55d63 white-1e1d7 square-e2" style="width:49px;height:49px;" id="e2-f699-d489-4d29-2e6f-2a64-c1ec-e26f-fb62" data-square="e2"><img src="chessboard/img/chesspieces/wikipedia/wP.png" alt="" class="piece-417db" data-piece="wP" style="width:49px;height:49px;"></div> ”）。

显示“正文”而不是正确元素的原因是什么？ 我应该怎么做才能让程序显示我点击的元素？

Answer 1

除非您真的知道自己在做什么，否则不要只对自身使用event.target 。 通常它与.closest()结合使用，当它应该被使用时它是 99%——这正是你所需要的。

此外，不要将事件分配给body ，而是使用最近的祖先，如#myBoard

此外，使用“mousedown”事件 - 因为它看起来像“click”挂起，因为元素从未收到“mouseup”来实现“click” ，因为单元格是以编程方式操作的

function cellClick (evt){
   const elCell = evt.target.closest("[data-square]");
   if (!elCell) return; // Do nothing. No cell element.

   // Otherwise do...
   console.dir(elCell);
}

document.querySelector("#myBoard").addEventListener(`mousedown`, cellClick);

由于您要定位的单元格元素使用数据集 Attribute ，即：

<div
  class="square-55d63 black-3c85d square-g7"
  id="g7-06f7-5132-52ee-91f2-0b5b-ab5a-4157-7f9c"
  data-square="g7"
>...</div>

由于该属性用于所有单元格，因此我使用了属性选择器"[data-square]"