浅谈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 相关文章推荐
jQuery 开天辟地入门篇一
Dec 09 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
javascript编写简易计算器
May 06 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 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去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python使用turtule画五角星的方法
2015/07/09 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python用模块pytz来转换时区
2016/08/19 Python
Python爬取三国演义的实现方法
2016/09/12 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
英国女装网上商店:I Saw It First
2018/10/18 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
小学教师管理制度
2014/01/18 职场文书
员工工作能力评语
2014/12/31 职场文书
车队安全员岗位职责
2015/02/15 职场文书
李强优秀员工观后感
2015/06/16 职场文书
大学生支教感言
2015/08/01 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
数据库之SQL技巧整理案例
2021/07/07 SQL Server