检测是否单击div包括childs jquery

Question

我需要检查是否点击了div及其子项

$('div').click(function(e){
     if(e.target.id  == 'test')
       alert(e.target.id);
});

我需要测试的div是我的html代码中的#test，这段代码是有效的，但是如果我点击子元素它什么都不做

我的代码中如何有目标+孩子？

Answer 1

您需要使用this（附加了事件的元素）而不是event.target（调用事件的元素），您应该使用ID Selector来附加事件处理程序，即$('#test')

$('div').click(function(e) {
  console.log(this.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  text
  <button>1</button>
</div>

Answer 2

如果您因为冒泡而点击孩子

，这将有效

 $('#test').click(function(e){
      console.log(e.target);
      //check if the target is the child you were expecting to be clicked
 });

Answer 3

如果要检查是否单击了child + parent，则将click事件放在子元素而不是父元素上。您可以将子元素作为div .divclass或直接子div>.divclass访问。