“e.target”調用錯誤的目標？
[英]"e.target" calling wrong target?
問題描述
我正在處理的組件依賴於<span>元素內的<img>元素，並且當<span>通過 JQuery 檢測到“單擊”事件時，應將該跨度的 ID 記錄到控制台。 但由於某種原因，正在記錄<img>的 ID。
$(() => { $('.star-span').click(e => { console.log(e.target); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="star-span" id="1"> <img class="star-img" width="15%" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" /> </span>
有人在我的代碼中看到任何明顯的錯誤嗎？
5 個解決方案
解決方案1
5 已采納 2018-09-05 05:41:13
行為符合預期。 根據MDN ， event.target為
對調度事件的對象的引用。 在事件的冒泡或捕獲階段調用事件處理程序時，它與
event.currentTarget不同。
被單擊的最里面的元素是img ，因此img是事件的target 。
如果要引用處理程序所在的元素，請改用e.currentTarget ：
$('.star-span').click(e => { console.log(e.currentTarget); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="star-span" id="1"> <img class="star-img" width="15%" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" /> </span>
解決方案2
1 2018-09-05 05:42:54
您要查找的是e.currentTarget而不是e.target 。 檢查代碼段。 e.currentTarget是分配給偵聽器的對象。 e.target是實際調度事件的對象（無論鼠標下方是什么）
$(() => { $('.star-span').click(e => { console.log(e.currentTarget); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="star-span" id="1"> <img class="star-img" width="15%" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" /> </span>
解決方案3
1 2018-09-05 05:46:30
正如其他人回答的那樣，使用e.currentTarget可以正常工作。 還有一種使用function代替arrow方法，使用this對象也將帶來好處。 您也可以在此處使用e.currentTarget 。
$(() => { $('.star-span').click(function(e){ console.log(this); console.log(e.currentTarget); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="star-span" id="1"> <img class="star-img" width="15%" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" /> </span>
解決方案4
1 2018-09-05 06:32:54
$('.star-span').click(e => { console.log(e.currentTarget.id); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <span class="star-span" id="1"> <img class="star-img" width="5%" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" /> </span> </body>
解決方案5
0 2022-01-18 15:18:33
我會委托並使用最接近的
$(() => { $('#container').on('click','.star-span',e => { const tgt = e.target.closest('.star-span'); if (tgt) console.log(tgt.id) }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <span class="star-span" id="star1"><img class="star-img" width="15%" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" /></span> <span class="star-span" id="star2"><img class="star-img" width="15%" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" /></span> <span class="star-span" id="star3"><img class="star-img" width="15%" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/2000px-Five-pointed_star.svg.png" /></span> </div>
.parentsUntil（$（e.target）.parents（'ul'）。length === 1）
[英].parentsUntil( $(e.target).parents('ul').length === 1 )
e.target可以訪問，但是e.target.value不在React組件中
[英]e.target is accessible, but e.target.value is not in React component
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.