如何使用JavaScript从子选择器禁用onclick功能

Question

我如何确保仅通过单击td而不是跨度来触发onclick事件？

<td style="cursor: pointer;" onclick="getDetails(13,3)">
   <span class="responsiveExpander"></span>
    TEST
</td>


function getDetails(table_id,id)
{
   alert(table_id + id);
}

Answer 1

您必须向内部子级添加事件侦听器，并取消事件的传播。

在普通JS中，类似

document.getElementById('inner').addEventListner('click',function (e){
   e.stopPropagation();
});

足够了。 请注意， jQuery提供了相同的功能 ：

$(".inner-div").click(function(event){
    event.stopPropagation();
});  

要么

$(".inner-inner").on('click',function(event){
    event.stopPropagation();
});  

Answer 2

假设要防止单击所有子元素，请将event传递给getDetails ，让其查看event.currentTarget是否与event.target相同。

 function getDetails(event, table_id, id) { if (event.currentTarget !== event.target) { return; // clicked a sub-element } alert(table_id + id); } 

 span { color: red; } 

 <table> <tr> <td style="cursor: pointer;" onclick="getDetails(event, 13,3)"> <span class="responsiveExpander">SHOULD NOT ALERT</span> TEST </td> </tr> </table> 

Answer 3

您可以执行以下操作；

 data.addEventListener("click", function(e){ e.target === this && console.log("td clicked"); }); 

 td {border: red solid 2px;} span{color: white; background-color: black} 

 <table> <tr> <td id="data" style="cursor: pointer"> <span>SPAN:</span> TEST </td> </tr> </table>