javascript - 如何通过单击父元素来检测子元素？

Question

我有一个parent元素的点击功能。我现在想检测我点击的部分是否有“child”类

 
$( ".parent" ).click(function() {
    if ( $( this ).hasClass( "child" ) ) {
        console.log("child");
    }   
});

.child{background-color:pink}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


 <table style="width:100%">
  <tr class="parent">
    <th>Firstname</th>
    <th>Lastname</th>
    <th class="child">Age</th>
  </tr>
</table> 

Answer 1

访问 event.target，这始终引用创建事件的原始目标。

在这种情况下，事件从 .child 开始，向上冒泡到 .parent，它触发了这个监听器……此时，this 和 event.currentTarget 将引用 .parent 元素。但是 target 仍将引用原始元素 .child.

$( ".parent" ).click(function(e) {
    if ( $( e.target ).hasClass( "child" ) ) {
        console.log("child");
    }   
});

JSFiddle Demo

此外，除非您有其他理由在 .parent 上设置监听器，否则您可以像这样直接将监听器添加到子级:

$( ".parent .child" ).click(function() {
    console.log("child");
});