问题描述:

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

<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. Yii2的Debug工具

    yii2的Debug工具 调用   r=debug 可以对程序进行性能分析,从而对程序进行改良 (1)数据库某条sql语句的执行时间 (2)debug的profiling标签 \YII::beginP ...

  2. 【BZOJ-3790】神奇项链 Manacher + 树状数组(奇葩) + DP

    3790: 神奇项链 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 304  Solved: 150[Submit][Status][Discuss] ...

  3. C语言之捕捉信号

    我们有时候需要在程序中做一些对于用户或内核发出的信号后的处理,如写回文件等善后处理的事情,或者直接忽略信号(当你按Ctrl+C时我压根不理你).下面是一段信号处理的代码(POSIX C): int c ...

  4. C#皮肤制作

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; u ...

  5. Cost Function Summary

    Mean Square Error \[cost(t,o)=\frac{1}{n}\sum\limits_{i=1}^n{(o-t)^2}\] Binary Cross-Entropy 用于计算 ta ...

  6. Mysql学习笔记(五)数据查询之测试sql部分。

    正文之前,介绍mysql一些很有趣的命令. 快速的创建表,并填充表数据. create table test like  已经有的表名: inset into test select * from f ...

  7. HTML5学习总结-08 WebSocket 服务器推送

    一 WebSocket 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展 ...

  8. RMQ模板

    RMQ:范围最小值问题.给出一个n个元素的数组A1,A2,...,An,设计一个数据结构支持查询操作Query(L,R):计算min{AL,AL+1,...,AR}. 每次用一个循环来求最小值显然不够 ...

  9. DIY(码表)制作实验

    代码: #include<reg52.h>typedef unsigned char u8;typedef unsigned int  u16;/********端口定义********* ...

  10. 10月16日下午MySQL数据库CRUD操作(增加、删除、修改、查询)

    1.MySQL注释语法--,# 2.2.后缀是.sql的文件是数据库查询文件. 3.保存查询. 关闭查询时会弹出提示是否保存,保存的是这段文字,不是表格(只要是执行成功了表格已经建立了).保存以后下次 ...