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控制台。

如何获得inside不管title是否在里面？

标签： javascriptjquery

Answer 1

您需要检查是否target有父母 .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>