我在嘗試獲取任何 html 元素的data屬性時遇到了一些問題。
問題是我在30%的情況下獲得了資料屬性。其余的回傳未定義。
這是我想要觸發的：
document.addEventListener("DOMContentLoaded",() => {
document.body.addEventListener("click",(e) => {
console.log("clicked");
console.log(e.target.dataset.link " is the link clicked") // this is returning undefined most of the times.
if (e.target.dataset.link !== undefined) {
console.log("got the link")
navigateTo(e.target.dataset.link);
}
})
// router();
})<div class="cell" data-link="/dashboard/posts" tabindex="1">
<i class="material-icons">assignment</i>
<span>Posts</span>
</div>這怎么可能？
我怎樣才能防止這種情況？
我無法洗掉主體的 onclick 事件偵聽器。
uj5u.com熱心網友回復：
event.target是事件所針對的元素，它可能在您的data-link元素內（如i和span在您的 中div）。可以使用closest方法與屬性存在選擇器（[attribute-name]）來查找data-link元件：
const dataElement = e.target.closest("[data-link]");
這檢查e.target，看看它的CSS選擇器相匹配，并且，如果沒有，看上去它的父，看它相匹配，依此類推，直到它到達檔案根目錄。如果它一直到根沒有找到它，則回傳null。
更新片段：
顯示代碼片段
document.addEventListener("DOMContentLoaded",() => {
document.body.addEventListener("click",(e) => {
const dataElement = e.target.closest("[data-link]");
if (!dataElement) {
return; // There wasn't one
}
console.log(dataElement.dataset.link " is the link clicked") // this is returning undefined most of the times.
if (dataElement.dataset.link !== undefined) {
console.log("got the link")
// navigateTo(dataElement.dataset.link);
}
})
// router();
})<div class="cell" data-link="/dashboard/posts" tabindex="1">
<i class="material-icons">assignment</i>
<span>Posts</span>
</div>但是，請注意evolutionxbox 的評論。您正在使用非語意元素和 JavaScript 代碼重新創建基本的 Web 功能。這會破壞您頁面的可訪問性，即使對于不依賴輔助技術的用戶，也無法使用瀏覽器的高級功能（例如）在新選項卡中打開鏈接等。
uj5u.com熱心網友回復：
您將事件偵聽器附加到檔案正文。你沒有得到資料集是絕對正常的：你可以點擊離開單元格，或者點擊一個元素進入這個。
您需要將事件附加到具有以下data-link屬性的所需元素 ：
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll('[data-link]').forEach(node => {
node.addEventListener("click", (e) => {
console.log("clicked");
console.log(node.dataset.link " is the link clicked")
})
})
})<div class="cell" data-link="/dashboard/posts">
<i class="material-icons">assignment</i>
<span>Posts</span>
</div>
<div class="cell">
<i class="material-icons">assignment</i>
<span>Posts</span>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/371500.html