如何阻止子元素获得父元素事件？

Question

<div class="select-all">
  <div class="checkbox">
     <input id="SelectAll" type="checkbox">
     <label for="SelectAll"></label>
 </div>
</div>

代码：

$(".select-all").click(function(e) {
        if(e.target == this)
        {
            $(".checkbox").toggleClass("checkbox-checked");
        }
       console.log(e.target);
    });

当我click时，在控制台看到
<label for="SelectAll">
<input id="SelectAll" type="checkbox">
那么if(e.target == this)这句话为什么没起作用呢？

Answer 1

update:

仍旧不是很明白题主更新问题的用意， 为什么if(e.target == this)没起作用？直接console.log(this)不就明了了么- -||

表示还是没get到题主的用意。

ps: 问题如果只是加以补充，建议是添加内容，而非修改。不然变得原来的回答们都变成答非所问了。重新开辟一个问题不失为一个好方法~

--- 问题更新前的回答

不是很明白题主的问意。
你这里是给div做了click绑定事件，如果单纯把addClass改成toggleClass。

确实点击label的时候看似没加上class，但实际上label有一个作用，你这里设置了for属性（male），当你点击了label之后是不是对应male的input也被选中了，所以当你点击label的时候确实触发了一次响应事件，但是input也被触发了一次，连续两次toggleClass是不是就等于没做啥改变呢？

$(document).ready(function(){
  $("div").click(function(e){
      console.log(e.target);
    $("h1,h2,p").toggleClass("blue");
  });
});

你在toggleClass之前加个打印，在console对着看看就知道了~

Answer 2

这个涉及到冒泡机制，你在代码里加个alert就可以看到，不是没有起作用，而是起了两次作用。

$(document).ready(function(){
  $("div").click(function(){
      alert(1)
    $("h1,h2,p").toggleClass("blue");
  });
});

为什么label触发两次而input触发一次呢？
答：input触发一次是没有问题的，关键就在label，label本身触发一次，同时，关联的input又触发了一次，所以，你看到的效果是没变，实则是变了然后又变回去了。