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

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>

Answer 2

好的，看看这个，看看它是否适合您？

https://codepen.io/jamie-endeavour/pen/GPjzRq?editors=1011

$('.parent').on('click', function(e) {
  var $target = $(e.target);

  if ($target.hasClass('inside') || $target.parent().hasClass('inside')) {
    console.log('inside');    
  } else {
    console.log('not inside');
  }
});

我正在检查用户是否单击了具有“ inside”类的元素，或者子元素是否属于“ inside”元素。

希望这有帮助吗？

Answer 3

请注意，HTML在图层中起作用，因此，如果标题将位于“内部”，则只需将标题作为目标即可，因为内部始终位于“内部”。

$('.title').on('click', function(e){
	console.log('inside');
});

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

检测带有一个孩子的元素的单击

3 个答案: