解决label点击事件触发两次问题
问题描述:
通常,为了用户体验,我们点击单选框或者复选框后面文字,即可选中当前项。代码如下:
<label>
<input type="radio" name="sex" />男
</label>
<label>
<input type="radio" name="sex" />女
</label>
但是,此时,如果label标签有点击事件,则会触发两次。
问题原因:
点击label的时候,事件冒泡一次,同时会触发关联的input的click事件,导致事件再次冒泡
解决办法:
1.判断事件来源,如果是input,则阻止。代码如下:
$("label").click(function (e) {
if ($(e.target).is("input"))
return;
//code
});
这个方法同样适用于解决“点击页面空白处隐藏弹窗”问题。
2.从写法上解决,使用label标签的for属性,代码如下:
<input type="radio" name="sex" id="man" /><label for="man">男</label>
<input type="radio" name="sex" id="women" /><label for="women">女</label>
3.其他解决办法,传送门
解决label点击事件触发两次问题的更多相关文章
- IScroll中div点击事件触发两次解决办法
1.网上的同学说的,直接修改源代码,但是这种方法可能会影响到现有的程序. 搜索onBeforeScrollStart方法,将其中的preventDefault禁止掉搜索_end方法,将其中模拟clic ...
- 解决jQuery中dbclick事件触发两次click事件
首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbc ...
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...
- 在Activity中响应ListView内部按钮的点击事件的两种方法!!!
在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...
- 关于select的使用感受~大坑~select不能添加点击事件触发~
这是一个坑,把我摔惨了! select+option是浏览器自带的下拉选项框,样式及其丑,还好现在有很多框架都相应做了些美化,select 元素是一种表单控件,可用于在表单中接受用户输入. 还有一个重 ...
- 在Activity中响应ListView内部按钮的点击事件的两种方法
转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在 ...
- css 禁止点击事件触发
鼠标不可点击主要是两种表现: 1.鼠标不可点击时的显示状态 cursor: not-allowed 2.禁止触发点击事件 pointer-events:none
- iframe onload事件触发两次
标准参考 关于 HTML 4.01 规范中 onload 内在事件说明:http://www.w3.org/TR/html401/interact/scripts.html#adef-onload 关 ...
随机推荐
- 让Bootstrap 3兼容IE8浏览器
最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...
- Hadoop实战第一篇
前言: 都说现在是草根为尊的时代,近年来hadoop及spark技术在国内越来越流行.而且渐渐现成为企业的新宠.在DT时代全面来临之前,能提早接触大数据的技术必然能先人一步.本文作为Hadoop系列 ...
- 转JAVA2
1.List遍历时删除的几种方式比较 1.1.会报错的删除方式: (1)在Iterator遍历时使用list删除 Iterator<String> it = list.iterator() ...
- Python字符串基础一
下一篇:Python 序列通用操作介绍 写在前面 下学期开始上计算机网络的课程,现在已经在看相关书籍,希望结合python写出一个网络爬虫程序.利用学习C++后的空余时间来看看Python并在这里总结 ...
- NOI题库刷题日志 (贪心篇题解)
这段时间在NOI题库上刷了刷题,来写点心得和题解 一.寻找平面上的极大点 2704:寻找平面上的极大点 总时间限制: 1000ms 内存限制: 65536kB 描述 在一个平面上,如果有两个点( ...
- 【bzoj2705】 SDOI2012—Longge的问题
http://www.lydsy.com/JudgeOnline/problem.php?id=2705 (题目链接) 题意 给定一个整数N,你需要求出∑gcd(i, N)(1<=i <= ...
- 【poj3241】 Object Clustering
http://poj.org/problem?id=3241 (题目链接) MD被坑了,看到博客里面说莫队要写曼哈顿最小生成树,我就写了一个下午..结果根本没什么关系.不过还是把博客写了吧. 转自:h ...
- hdu 5035 概率题
直接推公式的题目了.... Refer:http://blog.csdn.net/u012139398/article/details/39458623 https://www.zybuluo.com ...
- Markdown编辑器简单总结
字体大小: #1 ##2 添加链接: 文字链接 [blog](http://yalantis.com/blog/how_we_created_tab_bar_animation_for_ios/?ut ...
- SQL查询排序某字段并选前N条数据
看了网上各种乱七八糟的答案,无语. 明明这一句话就行了. select * from personinfo order by credit DESC limit 0,5