javascript - 检测点击里面有子元素的元素

Question

$('.parent').on('click', function(e) {
  if (e.target.matches('.inside')) {
    console.log('inside');
  } else {
    console.log('title');
  }
});

.parent {
  background: lightgreen;
}

.inside {
  background: silver;
}

.title {
  background: gold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent'>
  <div class='inside'>
    <div class='title'>lorem</div>
  </div>
  <br>
</div>

点击inside，您将在控制台中看到title。

无论title是否在内部，如何获取内部？

Answer 1

您需要检查目标是否有父级 .inside:-

$('.parent').on('click', function(e) {
  if ($(e.target).parents('.inside').length) {
    console.log('inside');
  } else {
    console.log('title');
  }
});

.parent {
  background: lightgreen;
}

.inside {
  background: silver;
}

.title {
  background: gold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent'>
  <div class='inside'>
    <div class='title'>lorem</div>
  </div>
  <br>
</div>