问题描述:

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

<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 5833】Zhu and 772002(异或方程组高斯消元)

    300个最大质因数小于2000的数,选若干个它们的乘积为完全平方数有多少种方案. 合法方案的每个数的质因数的个数的奇偶值异或起来为0. 比如12=2^2*3,对应的奇偶值为01(2的个数是偶数为0,3 ...

  2. yii基础应用目录结构

    basic/ 应用根目录 composer.json Composer 配置文件, 描述包信息 config/ 包含应用配置及其它配置 console.php 控制台应用配置信息 web.php We ...

  3. Pycharm设置

    File->settings->Editor->File and Code Templates->Python Script #!/usr/bin/env python # e ...

  4. Day_6作业_模拟人生

    as #!/usr/bin/env python # encoding: utf-8 class wisdom(object): def __init__(self,n,g): self.n = n ...

  5. 【BZOJ-4523】路由表 Trie树 + 乱搞

    4523: [Cqoi2016]路由表 Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 155  Solved: 98[Submit][Status][ ...

  6. macOS安装「oh my zsh」

    目前常用的 Linux 系统和 OS X 系统的默认 Shell 都是 bash,但是真正强大的 Shell 是深藏不露的 zsh, 这货绝对是马车中的跑车,跑车中的飞行车,史称『终极 Shell』, ...

  7. Hadoop的RPC分析

    一.基础知识 原理 http://www.cnblogs.com/edisonchou/p/4285817.html,这个谢了一些rpc与hadoop的例子. 用到了java的动态代理,服务端实现一个 ...

  8. Microsoft SQL Server,错误: 229 解决方案

    今天我在数据库新建一个用户时,碰到了一个奇怪的问题,账号建好了,也指定了该账号上对应的数据库.但是,奇怪的问题出现了,死活不让我新建表,提示如下: 最后,给我找到问题所在了,就是在指定表权限的时候权限 ...

  9. 计算机组成原理 及CPU,硬盘,内存三者的关系

    前面提到了,电脑之父——冯·诺伊曼提出了计算机的五大部件:输入设备.输出设备.存储器.运算器和控制器. 我们看一下现在我们电脑的: 键盘鼠标.显示器.机箱.音响等等. 这里显示器为比较老的CRT显示器 ...

  10. Vmware vsphere 网络架构

    VMware vSphere架构下服务器会虚拟出交换机来供ESX Host虚拟机来使用,虚拟交换机有两种,vSwitch虚拟交换机和vNetwork分布式虚拟交换机,每个ESX Host均有一个标准v ...