浅谈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 相关文章推荐
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
javascript函数特点实例分析
May 14 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 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的无限分类实现想法~
2007/01/02 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
JS模板实现方法
2013/04/03 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
Python性能提升之延迟初始化
2016/12/04 Python
基于python时间处理方法(详解)
2017/08/14 Python
使用requests库制作Python爬虫
2018/03/25 Python
python中join()方法介绍
2018/10/11 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
电脑租赁公司创业计划书
2014/01/08 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
驾驶员安全责任书
2014/07/22 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript