解决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 关 ...
随机推荐
- 【C++实现python字符串函数库】一:分割函数:split、rsplit
[C++实现python字符串函数库]split()与rsplit()方法 前言 本系列文章将介绍python提供的字符串函数,并尝试使用C++来实现这些函数.这些C++函数在这里做单独的分析,最后我 ...
- git 最基本的使用方法
1. git init ----初始化git仓库 2.git add . ----把代码添加到仓库 3.git commit -m '注释' ---commit:提交 -m:全部提交 ‘ ...
- 【bzoj3991】 寻宝游戏
http://www.lydsy.com/JudgeOnline/problem.php?id=3991 (题目链接) 题意 给出一个n个节点的带权树,m次操作每次修改一个关键点,求每次操作后,从其中 ...
- Linux下的删除命令
Linux:rm Windows:del rm parameter: -f, --force 忽略不存在的文件,从不给出提示.-i, --interactive 进行交互式删除-r, -R, - ...
- CameraFlash手电筒
有时候晚上找不到电棒,电灯,咱们可以写个小程序,利用照相机的闪光灯临时顶替上代码: 1 package com.linux.cameraflash; import android.hardware.C ...
- hdu 5237 二进制
很无聊的模拟题...mark几个有用的小程序: 字符->二进制ASCII码 string tobin(char c) { string t; ; i<; i++) { t=+)+t; c/ ...
- mysql导出表数据
mysqldump -upcrm -ppcrmUser*1 -h192.168.01.01 -P3399 ecrm_order0 T_EOrder>bak.sql MYSQLdump参数详解 m ...
- C++ Pitfalls 之 reference to an object in a dynamically allocated containter
(留坑待填) Extraction from the C++ Programming Language 4th. ed., Bjarne Stroustrup 31.3.3 Size and Cap ...
- 数据结构作业——order(二叉树遍历)
order Description 给出一棵二叉树的中序遍历和每个节点的父节点,求这棵二叉树的先序和后 序遍历. Input 输入第一行为一个正整数 n 表示二叉树的节点数目, 节点编号从 1 到 n ...
- WPF资源字典
如果相同的资源可用于不同的应用程序,把资源放在一个资源字典中就比较有效. 新建一个资源字典文件Dictionary1.xaml <ResourceDictionary xmlns="h ...