问题描述:

通常,为了用户体验,我们点击单选框或者复选框后面文字,即可选中当前项。代码如下:

<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点击事件触发两次问题的更多相关文章

  1. IScroll中div点击事件触发两次解决办法

    1.网上的同学说的,直接修改源代码,但是这种方法可能会影响到现有的程序. 搜索onBeforeScrollStart方法,将其中的preventDefault禁止掉搜索_end方法,将其中模拟clic ...

  2. 解决jQuery中dbclick事件触发两次click事件

    首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbc ...

  3. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  4. (转载)js(jquery)的on绑定点击事件执行两次的解决办法

    js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...

  5. 在Activity中响应ListView内部按钮的点击事件的两种方法!!!

    在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...

  6. 关于select的使用感受~大坑~select不能添加点击事件触发~

    这是一个坑,把我摔惨了! select+option是浏览器自带的下拉选项框,样式及其丑,还好现在有很多框架都相应做了些美化,select 元素是一种表单控件,可用于在表单中接受用户输入. 还有一个重 ...

  7. 在Activity中响应ListView内部按钮的点击事件的两种方法

    转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在 ...

  8. css 禁止点击事件触发

    鼠标不可点击主要是两种表现: 1.鼠标不可点击时的显示状态 cursor: not-allowed 2.禁止触发点击事件 pointer-events:none

  9. iframe onload事件触发两次

    标准参考 关于 HTML 4.01 规范中 onload 内在事件说明:http://www.w3.org/TR/html401/interact/scripts.html#adef-onload 关 ...

随机推荐

  1. 【HDU 5839】Special Tetrahedron(计算几何)

    空间的200个点,求出至少四边相等,且其余两边必须不相邻的四面体的个数. 用map记录距离点i为d的点有几个,这样来优化暴力的四重循环. 别人的做法是枚举两点的中垂面上的点,再把到中点距离相等的点找出 ...

  2. 【POJ 2528】Mayor’s posters(线段树+离散化)

    题目 给定每张海报的覆盖区间,按顺序覆盖后,最后有几张海报没有被其他海报完全覆盖.离散化处理完区间端点,排序后再给相差大于1的相邻端点之间再加一个点,再排序.线段树,tree[i]表示节点i对应区间是 ...

  3. bzoj4404: [Neerc2015]Binary vs Decimal

    WC结束了,来补一下这题的题解 首先感谢SC神犇YYY(第一个AC此题的神犇)教我做法 再感谢教YYY做法的Claris大爷 首先,我们发现一个性质,一个合法的数的后缀必定是合法的,所以我们就可以bf ...

  4. js-JavaScript高级程序设计学习笔记16

    第20章 JSON JOSN,JavaScript对象表示法,是JS的一个严格的子集,但是它是一种数据格式,虽然与JS具有相同的语法形式,但是不从属于JS. 1.语法 ①可表示简单值--字符串.数值. ...

  5. 【bzoj2245】 SDOI2011—工作安排

    http://www.lydsy.com/JudgeOnline/problem.php?id=2245 (题目链接) 题意 n个产品,每个需要造C[i]件:m个员工,每个员工可以制造一些产品:每个员 ...

  6. Jenkins的Publish Over FTP Plugin插件参数使用

    无论在Windows还是Linux下,都是采用这样方式${WORKSPACE}

  7. 洛谷P1629 邮递员送信

    题目描述 有一个邮递员要送东西,邮局在节点1.他总共要送N-1样东西,其目的地分别是2~N.由于这个城市的交通比较繁忙,因此所有的道路都是单行的,共有M条道路,通过每条道路需要一定的时间.这个邮递员每 ...

  8. centos7 建立虚拟目录

    一.安装mysql,直接用yum安装即可,mysql在centos7.0版本中被mariadb替代了. 命令: yum install mysql-server mysql 安装好了,选择修改mysq ...

  9. 高性能JavaScript(您值得一看)

    众所周知浏览器是使用单进程处理UI更新和JavaScript运行等多个任务的,而同一时间只能有一个任务被执行,如此说来,JavaScript运行了多长时间就意味着用户得等待浏览器响应需要花多久时间. ...

  10. Manacher算法

    Manacher算法是求回文串最高效的算法,能在线性时间内求出以每一个字符为中心的最长回文串.   首先,我们都能想出$O(N^2)$求出每一个字符为中心的最长回文串的算法.那么我们考虑这样一种情况. ...