我有一个多列、多行的表。每行都有一个唯一的“数据索引”属性。我在每一行添加了一个单击事件侦听器。但是，当我单击该行时，我单击时恰好经过的单元格成为回调的目标。为了获得“data-index”属性，我必须使用
event.target.parentElement.getAttribute( "data-index" )考虑一下...
<!DOCTYPE html>
<html>
<body>
<table>
<tr data-index="0" onclick="handler(event)">
<td>11</td><td>12</td><td>13</td>
</tr>
<tr data-index="1" onclick="handler(event)">
<td>21</td><td>22</td><td>23</td>
</tr>
<tr data-index="2" onclick="handler(event)">
<td>31</td><td>32</td><td>33</td>
</tr>
</table>
<script>
function handler ( event ) {
console.log( event.target.innerText );
console.log( event.target.getAttribute( "data-index" ) );
console.log( event.target.parentElement.getAttribute( "data-index" ) );
}
</script>
</body>
</html>
澄清一下；我对行感兴趣，而不是它的单元格。这是“拥有”数据属性的行，所以...
为什么事件目标是单元格而不是行？ （没有单元格有事件侦听器。）至少，这是非常不直观的；我做错了什么吗？
请使用
event.currentTargettarget <table>
<tr data-index="0" onclick="handler(event)">
<td>11</td><td>12</td><td>13</td>
</tr>
<tr data-index="1" onclick="handler(event)">
<td>21</td><td>22</td><td>23</td>
</tr>
<tr data-index="2" onclick="handler(event)">
<td>31</td><td>32</td><td>33</td>
</tr>
</table>
<script>
function handler ( event ) {
console.log( event.currentTarget.innerText );
console.log( event.currentTarget.getAttribute( "data-index" ) );
console.log( event.currentTarget.parentElement.getAttribute( "data-index" ) );
}
</script>