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

Why Event Listener "click" shows the "body" element instead of the element that I clicked on?

提问人：Jaroslav Tavgen 提问时间：1/8/2023 最后编辑：Jaroslav Tavgen 更新时间：1/8/2023 访问量：134

问：

我去了棋盘.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”）。

但是当我点击一个带有白色碎片的正方形时，控制台打印了“身体”。当我右键单击同一个方块并选择“检查”时，它正确地在开发人员工具的“元素”部分的“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;高度：49px;”></div>“）。

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

JavaScript 事件 处理 dom-events

评论

0赞 Pointy 1/8/2023
可能有一个事件处理程序可以停止空方块的传播，但不会停止占用方块的传播。
0赞 Jaroslav Tavgen 1/8/2023
尖锐，是的，我也倾向于这样想。
0赞 Jaroslav Tavgen 1/8/2023
安德烈亚斯，你能澄清一下你是如何尝试复制的吗？空方块没有 IMG。

答：

1赞 Roko C. Buljan 1/8/2023 #1

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

此外，不要将事件分配给 ，而是使用最接近的祖先，例如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);

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

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

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

评论

0赞 vanowm 1/8/2023
您的示例与 OP 完全不同，并不总是可以在元素本身上设置事件侦听器。
0赞 Roko C. Buljan 1/8/2023
@vanowm 你到底在说什么？这根本不是“完全不同”。这正是OP的目标。只是对 OP 的代码稍作修改。
0赞 Roko C. Buljan 1/8/2023
@vanowm是的，上面使用了事件委托 - 因此，即使在 DOM 的稍后时间点动态添加单元格，它也可以工作。如果父级也是动态添加的，则必须改用已知的静态祖先。🤓#myBoard
0赞 Jaroslav Tavgen 1/8/2023
@Roko C. Buljan 中，我在控制台中复制粘贴了这段代码，当我单击带有棋子的方块时，它没有显示任何内容。当我点击一个空方块时，它确实显示了正确答案。
0赞 Roko C. Buljan 1/8/2023
@JaroslavTavgen答案中添加了解释。它是一个数据属性。在这里阅读更多 developer.mozilla.org/en-US/docs/Learn/HTML/Howto/... 和这里 developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

上一个：在 React 中覆盖 onClick

下一个：对 keydown 事件使用 preventDefault（） 后未触发事件 onchange