解决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 关 ...
随机推荐
- Python列表、元组、字典和字符串的常用函数
Python列表.元组.字典和字符串的常用函数 一.列表方法 1.ls.extend(object) 向列表ls中插入object中的每个元素,object可以是字符串,元组和列表(字符串“abc”中 ...
- MAC下Eclipse的常用快捷键
整理Eclipse常用快捷键 开发环境切换到Mac下后原来Window下的快捷键很大一部分是不相容的,习惯了快捷键的生活忽然哪天快捷键不起作用了,跟着的就是开发效率明显降低,频繁录入错误的快捷键让Ec ...
- MapReduce实现协同过滤中每个用户看过的项目集合
一.知识准备 hadoop自带的例子在 D:\HADOOP_HOME\hadoop-2.6.4\share\hadoop\mapreduce\sources\hadoop-mapreduce-exam ...
- bzoj2219: 数论之神
#include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...
- Linux process authority、the security risks in running process with high authority
catalog . Linux进程权限原理 . 最小权限原则 - 进程降权运行最佳实践 . 进程权限控制包含的攻防向量 . 进程高权限安全风险检查技术方案 1. Linux进程权限原理 我们知道,Li ...
- fileinput
# -*- coding: utf-8 -*- __author__ = 'metasequoia' import fileinput def file_input(): for line in fi ...
- PTA 链表删除结点的题目测试
链表删除结点 题目描述 输入一个正整数repeat(0 < repeat < 10),做repeat次下列运算: 输入一个正整数n(0 < n < 10)和一组( n 个 )整 ...
- 解决冲突-git入门教程
人生不如意之事十之八九,合并分支往往也不是一帆风顺的. 准备新的feature1分支,继续我们的新分支开发: $ git checkout -b feature1 Switched to a new ...
- 初识JSLint及建议JS编码风格
可能都或多或少的知道JSLint是一个JavaScript的代码质量工具,一个JavaScript语法检查器和校验器,它能分析JavaScript问题并报告它包含的缺点. 被发现的问题往往是语法错误, ...
- LABjs(类似于LazyLoad,但它更加方便管理依赖关系)
动态加载JS函数 一般性的,当我们需要加载js文件的时候都会使用script标签来实现,类似于如下代码: <script type="text/javascript" src ...