美文网首页
解决label 和checkbox点击事件触发两次问题

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

作者: 瓜田猹 | 来源:发表于2017-09-01 18:41 被阅读1138次

    问题描述

    最近在做项目是遇到自定义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

    相关文章

      网友评论

          本文标题:解决label 和checkbox点击事件触发两次问题

          本文链接:https://www.haomeiwen.com/subject/baekjxtx.html