[英]How to get data attribute of element when click on it or it child
I am making a Table . 我正在做一张桌子 。
document.querySelector('table').addEventListener('click', (e) => { console.log(e.target); console.log(e.target.dataset.item); })
td { padding: 8px; border: 1px solid black; background-color: blue; } span { background-color: red; padding: 4px; }
<table> <tr> <td data-item="item1"><span>1</span></td> <td data-item="item2"><span>2</span></td> <td data-item="item3"><span>3</span></td> <td data-item="item4"><span>4</span></td> <td data-item="item5"><span>5</span></td> </tr> </table>
When I click the BLUE PART , I can get data-item
attribute. 当我单击BLUE PART时 ,我可以获取
data-item
属性。 But when I click the RED PART , I can't. 但是,当我单击红色部分时 ,我不能。
I wanna fix it, if I click <span/>
in <td/>
, I want to get data-item
attribute from <td />
. 我想修复它,如果我单击
<span/>
<td/>
<span/>
,我想从<td />
获取data-item
属性。
Try to use closest
by your child tag instead of dataset
. 尝试使用由您的子标记代替
closest
的dataset
。
document.querySelector('table').addEventListener('click', (e) => { console.log(e.target.closest("td").dataset.item); })
td { padding: 8px; border: 1px solid black; background-color: blue; } span { background-color: red; padding: 4px; }
<table> <tr> <td data-item="item1"><span>1</span></td> <td data-item="item2"><span>2</span></td> <td data-item="item3"><span>3</span></td> <td data-item="item4"><span>4</span></td> <td data-item="item5"><span>5</span></td> </tr> </table>
Check if name of clicked element is span
select parent of it using parentNode
property 检查被单击元素的名称是否为
span
,使用parentNode
属性选择其父元素
document.querySelector('table').addEventListener('click', (e) => { var ele = e.target.nodeName == "SPAN" ? e.target.parentNode : e.target; console.log(ele.dataset.item); })
td { padding: 8px; border: 1px solid black; background-color: blue; } span { background-color: red; padding: 4px; }
<table> <tr> <td data-item="item1"><span>1</span></td> <td data-item="item2"><span>2</span></td> <td data-item="item3"><span>3</span></td> <td data-item="item4"><span>4</span></td> <td data-item="item5"><span>5</span></td> </tr> </table>
Why do you listen on the whole table in the first place? 为什么首先要在整张桌子上听?
Listen only on "td" elements: 仅听“ td”元素:
let cells = document.getElementsByTagName('td');
for (var i=0; i < cells.length; i++) {
let cell = cells[i];
cell.addEventListener('click', (e) => {
let element = e.target.nodeName;
if (element === 'TD') {
console.log(e.target.dataset.item);
} else if (element === 'SPAN') {
console.log(e.target.parentNode.dataset.item);
}
});
}
I don't think setting the listener on the table matters, because in your case, it doesn't trigger the event on the table anyways. 我认为在表上设置侦听器并不重要,因为在您的情况下,无论如何它都不会触发表上的事件。
Some styles for better inspection: 一些样式以便更好地检查:
table {
background-color: orange;
border-spacing: 10px;
}
https://jsfiddle.net/aleks351/p0b46wqs/6/ https://jsfiddle.net/aleks351/p0b46wqs/6/
You could check for the keys in the dataset of the clicked item and if it does have some properties then use e.target
otherwise move up one level e.target.parentNode
: 您可以检查单击项的数据集中的键,如果它确实具有某些属性,则使用
e.target
否则将其上移e.target.parentNode
一级:
document.querySelector('table').addEventListener('click', (e) => { var el = Object.keys(e.target.dataset).length ? e.target: e.target.parentNode; console.log(el.dataset.item); })
td { padding: 8px; border: 1px solid black; background-color: blue; } span { background-color: red; padding: 4px; }
<table> <tr> <td data-item="item1"><span>1</span></td> <td data-item="item2"><span>2</span></td> <td data-item="item3"><span>3</span></td> <td data-item="item4"><span>4</span></td> <td data-item="item5"><span>5</span></td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.