[英]Why Event Listener "click" shows the "body" element instead of the element that I clicked on?
I went to chessboard.js https://chessboardjs.com/examples#5000 , opened Developer Tools and pasted the following code我去了 chessboard.js https://chessboardjs.com/examples#5000 ,打开开发工具并粘贴以下代码
document.body.addEventListener(`click`, a1);
function a1(){
console.dir(event.target);
}
When I clicked on an empty chess square or on a square with a black piece, the console printed the correct result (for example, "div#e5-b9f9-a5bc-69e1-3e5a-4b82-b2bc-ffe4-966c.square-55d63.black-3c85d.square-e5").当我点击一个空的国际象棋方格或一个有黑色棋子的方格时,控制台打印出正确的结果(例如,“div#e5-b9f9-a5bc-69e1-3e5a-4b82-b2bc-ffe4-966c.square- 55d63.black-3c85d.square-e5").
But when I clicked on a square with a white piece on it, the console printed "body".但是当我点击一个上面有白色方块的正方形时,控制台打印出“body”。 When I right-clicked on the same square and chose "Inspect" it correctly showed an "img" element inside a "div" element in the section "Elements" of the Developer Tools (for example, <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>").当我右键单击同一个方块并选择“检查”时,它在开发人员工具的“元素”部分的“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> ”)。
What is the reason for showing "body" instead of a correct element?显示“正文”而不是正确元素的原因是什么? What should I do to make the program show me the element I clicked on?我应该怎么做才能让程序显示我点击的元素?
Don't just use event.target
on itself unless you really know what you're doing.除非您真的知道自己在做什么,否则不要只对自身使用event.target
。 Usually it goes in combination with .closest()
which is 99% when it should be used - and that's exactly what you also need.通常它与.closest()
结合使用,当它应该被使用时它是 99%——这正是你所需要的。
Also, instead of assigning event to body
, use a nearest ancestor like #myBoard
此外,不要将事件分配给body
,而是使用最近的祖先,如#myBoard
Also, use "mousedown" Event - since it seems like the "click" hangs because the element never receives a "mouseup" to fulfill the "click" since the cell is manipulated programmatically此外,使用“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);
Since the cell elements you want to target use a dataset Attribute , ie:由于您要定位的单元格元素使用数据集 Attribute ,即:
<div
class="square-55d63 black-3c85d square-g7"
id="g7-06f7-5132-52ee-91f2-0b5b-ab5a-4157-7f9c"
data-square="g7"
>...</div>
and since that attribute is used for all cells I used the Attribute selector "[data-square]"
由于该属性用于所有单元格,因此我使用了属性选择器"[data-square]"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.