为什么事件侦听器"click"显示"body"元素而不是我单击的元素？

Question

我去了棋盘.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"元素(例如，

")。

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

Answer 1

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

此外，与其将事件分配给body，不如使用最近的祖先，例如#myBoard

此外，使用"mousedown"事件 - 因为似乎"单击"挂起，因为元素永远不会收到">mouseup">来完成"单击">，因为单元格是以编程方式操作

的

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);

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

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

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