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

问题描述

问 题

<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)这句话为什么没起作用呢？

解决方案

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对着看看就知道了~

这篇关于jquery - 如何阻止子元素获得父元素事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！