2 回答

TA貢獻1862條經驗 獲得超6個贊
那么幾件事
其一,我無法將您的addEventListener('click', ({ target: { dataset }
構造識別為有效的 JavaScript。
我試圖不做太多改變,但我
返回全套卡片
正確地從容器中委托 - 單擊卡中的任意位置將返回類別
let categoryCard;
const cards = [
{ image : "https://via.placeholder.com/128x90.png?text=Card1", name:"Card 1"},
{ image : "https://via.placeholder.com/128x90.png?text=Card2", name:"Card 2"},
{ image : "https://via.placeholder.com/128x90.png?text=Card3", name:"Card 3"}
]
function renderCategory(cards) {
return cards.map((card,i) => (
`<div class="card card-category" data-category="${i}">
<div class="card-image">
<img src="${card.image}">
</div>
<div class="card-desc">
<div class="card-text">${card.name}</div>
</div>
</div>`)).join("");
}
function createCard(cards) {
const main = document.getElementById('category');
main.innerHTML += renderCategory(cards);
categoryCard = main.querySelector(".card-category"); // first card
}
window.addEventListener('load', () => {
document.querySelector('#category').addEventListener('click', e => {
const tgt = e.target;
const parent = tgt.classList.contains("card-category") ? tgt : tgt.closest(".card-category")
console.log(parent && parent.dataset.category ? parent.dataset.category : "clicked somewhere else")
})
createCard(cards)
})
<div id="category"></div>

TA貢獻1799條經驗 獲得超9個贊
event.target
指的是觸發事件的 DOM 樹的最低元素。換句話說,根據您單擊的位置,target
可以是卡片類別 DIV、卡片圖像 DIV、卡片描述 DIV、卡片文本 DIV 或 IMG 元素。這就是為什么您無法訪問僅在父級上設置的數據屬性的原因。
如果您希望始終獲取綁定事件的元素,請改用event.currentTarget
。但就您而言,您將事件綁定到主#category
包裝器。如果要將事件綁定到具有該屬性的元素data-category
,則必須重新組織代碼以使用document.createElement
而不是生成 HTML 字符串。
請記住,您應該在將事件綁定到元素之前將元素附加到頁面。
添加回答
舉報