浅谈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 创建对象和构造类实现代码
Jul 30 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
vue实现移动端拖动排序
Aug 21 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实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
js 提交和设置表单的值
2008/12/19 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
python使用wxpython开发简单记事本的方法
2015/05/20 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
python列表使用实现名字管理系统
2019/01/30 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
英格兰足协官方商店:England Store
2019/07/12 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
介绍一下UNIX启动过程
2013/11/14 面试题
高中毕业自我鉴定
2013/12/13 职场文书
办公室助理岗位职责
2013/12/25 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL