浅谈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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
Javascript下的keyCode键码值表
Apr 10 Javascript
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
Vue简单实现原理详解
May 07 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
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
JavaScript ES 模块的使用
2020/11/12 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
对Python中内置异常层次结构详解
2018/10/18 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
Python input函数使用实例解析
2019/11/22 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
使用Python pip怎么升级pip
2020/08/11 Python
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
教导处教学工作总结
2015/08/12 职场文书
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技
Elasticsearch 批量操作
2022/04/19 Python