PHP技术,PHP研究及学习,Python学习,人工智能,大数据服务

PHP+Python » 前端设计 » label checkbox点击触发两次原因及解决方法

label checkbox点击触发两次原因及解决方法

此文被围观32日期: 2019-08-07 分类 : 前端设计  标签:  ···

原因:label和input标签嵌套,点击label的时候,事件冒泡一次,同时会触发关联的input的click事件,导致事件再次冒泡,以至于达不到我们想要的触发效果。


不使用js解决方法:将input放到label外面(推荐使用这种方法)

  <input type="checkbox" value="" name="test" id="test" /> <label for="test" class="testCbox">hello world</label>
js处理方法:
方法一、对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");       
      }    
})



文章来源:https://www.jianshu.com/p/ca77eabbb161

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2019adophper.com All Rights Reserved.