解决label 和checkbox点击事件触发两次问题

问题描述

最近在做项目是遇到自定义checkbox多选需求，点击label时，触发了两次点击事件

页面元素

 <div class="multi-list hasTip bb pb-10">
     <div class="tit c6">机构属性：</div>
     <div class="mulit-item" id="institution">
         <label class="checkBtn checkBtn-default mr-10">
           <input class="checkbox" type="checkbox"  value="银行个贷">银行个贷
        </label>
         <label class="checkBtn checkBtn-default mr-10">
           <input class="checkbox" type="checkbox"  value="消费金融">消费金融
        </label> 
        <label class="checkBtn checkBtn-default mr-10">
            <input class="checkbox" type="checkbox"  value="典当行">典当行
       </label>
        <label class="checkBtn checkBtn-default mr-10">
           <input class="checkbox" type="checkbox"  value="信贷中介">信贷中介
       </label>
    </div>
</div>

点击事件

 $(".multi-list").on("click","label.checkBtn",function(){
      if($(this).hasClass("selected")){
         console.log("删除");
         $(this).removeClass("selected");
       }else{
         console.log("选中");
         $(this).addClass("selected");
       }
    })

看下图，神奇的事情发生了！！！竟然label没有选中的样式，还把 “选中” 和 “删除” 都给我打印出来了，同时满足这两个矛盾的条件是不可能的，那到底是什么原因呢？

1504260965(1).png

原因：原来是label和input标签嵌套，点击label的时候，事件冒泡一次，同时会触发关联的input的click事件，导致事件再次冒泡，以至于自定义的复选框达不到我们想要的效果

点击label的时候打印“选中”，label添加class selected，当事件冒泡到input时，已经满足条件$(this).hasClass("selected")，打印“删除”，删除class selected，由于这个时间很短，这就是为什么我点击label没有给它添加样式了

那我们怎么解决呢？

方法一、对event.target进行判断

 $(".multi-list").on("click","label.checkBtn",function(event){
      if($(event.target).is('input')){//对点击目标元素做判断
        return;
      }
      if($(this).hasClass("selected")){
         console.log("删除");
         $(this).removeClass("selected");
       }else{
         console.log("选中");
         $(this).addClass("selected");
       }
    })

方法二、将事件绑定在input checkbox上，我们就不会触发label的click事件了

   $(".multi-list").on("click","input.checkbox",function(){
      if(!$(this).parent().hasClass('selected')){
         console.log("选中");
         $(this).parent().addClass("selected");
       }else{
         console.log("删除");
        $(this).parent().removeClass("selected");
       }
    })

我们可以看到下图已经有选中的样式了

1504262076(1).png