Question

我有一个parent元素的点击功能。我想现在检测我点击的部分是否有＃34;孩子＆＃34;

＆＃13;

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

＆＃13;

.child{background-color:pink}

＆＃13;

<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>

＆＃13;

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

此外，除非你有其他理由让{1}}上的听众，你可以直接将听众添加到孩子：

.parent

Answer 2

您可以使用event.target来确定点击的原始目标：

＆＃13;

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

＆＃13;

.child {
  background-color: pink
}

＆＃13;

<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>

＆＃13;

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

2 个答案: