jquery点击label触发2次的问题
今天写问卷的时候遇到个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(这是网上有人贴出来的解决方法)http://www.cnblogs.com/feng524822/p/4084037.html
/*** 是否包含某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;}
。。。反正我是看的有点醉了
然后方法三。。。
通过事件触发的时间戳来判断,其实和事件冒泡有关的问题都可以通过该方法去处理。安全无公害
1 var evTimeStamp = 0; 2 document.getElementById("test").onclick = function(e) { 3 var now = +new Date(); 4 if (now - evTimeStamp < 100) { 5 return; 6 } 7 evTimeStamp = now; 8 console.log(2); 9 }
好了讨论到最后。。。我还是吧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 + "个") }})
好久好久没有出来冒泡了~~~最近宛如海绵吸水般的吸收着知识。react也搞得风风火火!!!偶尔还客串下写点PHP的接口。做一个商城。。。外加一个聊天室。。。好咯。。。继续工作了,
最后祝所有端午节还在撸代码的程序猿,事业有成
jquery点击label触发2次的问题相关推荐
- ajax点击事件触发后台,使用jquery点击事件触发AJAX
我有两个下拉菜单,其中一个我试图用jquery替换单选按钮.第二个盒子通过AJAX进行更新,每次用户在第一个下拉菜单中进行选择时都会有新选项.我已经成功生成单选按钮,可以更改第一个下拉列表的值,但是当 ...
- label 阻止冒泡 防止点击label 触发2次事件
// 必须要把 jnput的外面的label加上事件阻止冒泡,否则点击label的时候,会冒泡到input上 再次触发input的点击事件$('.xt_order_cleft_modb_rl_dx') ...
- jquery点击li触发a链接href事件
$("#left li").click(function() { $("a",this)[0].click(); }); 之前我用$("a" ...
- antd-vue中的form表单label标签for导致点击文字触发输入框解决方案
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案 参考文章: (1)antd-vue中的form表单label标签for导致点击文字触发输入框解决方案 (2)http ...
- jquery触发点击事件
1.jquery触发事件函数trigger(type,[data]) 在每一个匹配的元素上出发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个submit ...
- Avue 点击事件触发新增,新增携带数据
一. 新增按钮设置为false option: {addBtn: false,//设置不显示新增按钮column[{label: "预警类型",prop: "typeId ...
- jQuery 点击事件冲突
jQuery 点击事件冲突:img上有点击方法,btn在img上也有点击方法:点击btn时会同时触发两者事件 在btn的onclick事件里 加上 阻止冒泡:JQuery的 : event.stopP ...
- JS与JQuery点击事件传递参数
我们知道JS(javascript)是一种脚本语言,用于客户端web开发,常用来给html网页添加动态功能,是客户端运行的解释性语言. JQuery是对js的封装,简化了ajax和html的一款js框 ...
- jquery中点击事件click的写法
jquery中点击事件click的写法: <input type="button" "test1()" id="btn1" value ...
最新文章
- EOS能不能囤?一篇文章搞懂EOS优缺点
- 7714天,王小川正式卸任搜狗CEO!用一瞬间定格永恒
- 温故知新 javascript 正则表达式
- 【Linux】27.Markdown的用法
- 今后最有前途的媒体格式 MXF
- 【NOIP模拟】健美猫
- idea出现 Error:(1, 16) java: 非法字符: '\u0a0d'
- Java JSON转换为map
- Java程序员必读的10本书籍
- 传奇服务器注册不了账号密码,登录器显示服务器状态良好,但不能注册帐号?...
- Linux内核启动工作流程初探
- 计算机导论论文对课程的思考,计算机导论课浅析论文
- 18位身份证号验证算法的原理以及C#实现和在管理系统的应用
- conda create出现连接问题_处理conda安装工具的动态库缺失问题
- meanShift算法介绍
- Linux常用命令练习
- 罗马音平假名中文可复制_如何快速有效地学习日语五十音?
- JZOJ5952. 【NOIP2018模拟11.5A组】凯旋而归
- 计算机组装和维护课程,计算机组装和维护课程改革.doc
- 资本赋能,跨境电商Starday逐鹿年终场
热门文章
- 《Python Cookbook 3rd》笔记(2.3):用Shell通配符匹配字符串
- python turtle画圣诞树动图_圣诞节!教你用Python画棵圣诞树
- Redis数据的类型
- C++ primer 第12章 12.3 使用标准库:文本查询程序
- Android RecyclerView实现九宫格效果
- 加入初创企业需要想清楚的几个问题
- 集市中迷失的一代:FreeBSD核心开发者反思开源软件质量
- H.264视频编解码的代码移植和优化
- FFMpeg的output_example.c例子分析
- 使用Cygwin实现vlc 1.0.5的wince移植