浅谈jquery点击label触发2次的问题


Posted in Javascript onJune 12, 2016

今天写问卷的时候遇到个label点击的时候,监听的click事件被执行两次;产生这个的原因么。。。事件冒泡

<div class="questionBox checkBox">
      <div class="title"> 2.你如何理解创新意识的重要性?</div>
      <div class="checkBoxList" data-more="2">
      <label>
       <input type="checkbox" />
       <span>创新意识是工作必须的</span></label>
      <label>
       <input type="checkbox" />
       <span>创新意识是工作必须的</span></label>
      <label>
       <input type="checkbox" />
       <span>创新意识是工作必须的</span></label>
      <label>
       <input type="checkbox" />
       <span>创新意识是工作必须的</span></label>
      <label>
       <input type="checkbox" />
       <span>创新意识是工作必须的</span></label>
       </div>
      <input type="text" class="text" placeholder="在此输入其它的意见" />
     </div>
$(".checkBoxList label").click(function(){
    var more = $(this).parent(".checkBoxList").attr("data-more");
    var length = $(this).parent(".checkBoxList").find("label").length;
    var NowCheck=0;
    for(i=0;i<length;i++){
      if ($(this).parent(".checkBoxList").find("label").eq(i).find("input").prop("checked")==true){
        pass="1"
        NowCheck = NowCheck+1
      }
    }
    if(NowCheck>more){
      alert("本题最多选取" + more + "个")  
    }
  })

然后么找了下方法。。。

方法一:把label扔了。。。

然后方法二

只认input,判断事件源为input(这是网上有人贴出来的解决方法)

/**
   * 是否包含某id的input后代元素
   * @param {Element} elm 要判断的元素
   * @param {String}  id 要匹配的id
   * @return {Boolean}
   */
  function hasInput(elm, id) {
    for (var i = 0, inputs = elm.getElementsByTagName("input"), len = inputs.length; i < len; i++) {
      if (inputs[i].id === id) {return true;}
    }
    return false;
  }
  /**
   * 判断某元素下的label是否有关联的input
   * @param {Element} elm  要判断的元素
   * @param {Element} label label元素
   * @return {Boolean}
   */
  function isLabelhasRelativeInput(elm, label) {
    if (label.getElementsByTagName("input").length) {
      return true;
    }
    var forT = label.getAttribute("for");
    var isIE6 = !-[1,] && !window.XMLHttpRequest;// IE6不支持for属性
    if (forT && hasInput(elm, forT) && !isIE6) {
      return true;
    }
    return false;
  }
  document.getElementById("test").onclick = function(e) {
    var ev = e || window.event;
    var srcElm = ev.target || ev.srcElement;
    if (srcElm.tagName === 'LABEL' && isLabelhasRelativeInput(this, srcElm)) {return;}
    // do something;
  }

。。。反正我是看的有点醉了

然后方法三。。。

通过事件触发的时间戳来判断,其实和事件冒泡有关的问题都可以通过该方法去处理。安全无公害

var evTimeStamp = 0;
  document.getElementById("test").onclick = function(e) {
    var now = +new Date();
    if (now - evTimeStamp < 100) {
      return;
    }
    evTimeStamp = now;
    console.log(2);
  }

好了讨论到最后。。。我还是吧label给扔了。。。HOHOHO

$(".checkBoxList label input").click(function(){
    var more = $(this).parents(".checkBoxList").attr("data-more");
    var length = $(this).parents(".checkBoxList").find("label").length;
    var NowCheck=0;
    for(i=0;i<length;i++){
      if ($(this).parents(".checkBoxList").find("label").eq(i).find("input").prop("checked")==true){
        pass="1"
        NowCheck = NowCheck+1
      }
    }
    if(NowCheck>more){
      alert("本题最多选取" + more + "个")  
    }
  })

以上这篇浅谈jquery点击label触发2次的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Array数组对象的扩展函数代码
May 22 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
全面分析JavaScript 继承
May 30 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 #Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 #Javascript
JavaScript手机振动API
Jun 11 #Javascript
JavaScript地理位置信息API
Jun 11 #Javascript
jQuery自定义数值抽奖活动代码
Jun 11 #Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 #Javascript
javaScript知识点总结(必看篇)
Jun 10 #Javascript
You might like
利用PHP创建动态图像
2006/10/09 PHP
PHP常用函数小技巧
2008/09/11 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
python局域网ip扫描示例分享
2014/04/03 Python
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
matplotlib实现区域颜色填充
2019/03/18 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
详解python和matlab的优势与区别
2019/06/28 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
学校采购员岗位职责
2014/01/02 职场文书
采购求职信
2014/03/17 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
爱心捐款活动总结
2015/05/09 职场文书
初一年级组工作总结
2015/08/12 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server