label标签内含有input元素,点击事件会触发两次
**label标签内含有input元素,点击事件会触发两次**
如果你的结构是label内写input实现点击文字时候input也有相应。并且,把事件设置在了label上,那么就会执行两次了。
//html:
<label class="first"><input type="checkbox"/>第一</label>
<br/>
<label class="second"><span>第二</span></label> //jQuery
$('.first').add('.second').off('click').on('click',function () {
if ($(this).hasClass('selected')) {
console.log(1);
$(this).removeClass('selected');
} else {
console.log(2);
$(this).addClass('selected');
}
});
//点击'first'标签,事件会触发两次,console结果为2和1
//点击'second'标签,事件触发一次,console结果为2/1
//html:
<label class="first"><input type="checkbox"/>第一</label>
<br/>
<label class="second"><span>第二</span></label> //jQuery
$('.first').add('.second').off('click').on('click',function () {
if ($(this).hasClass('selected')) {
console.log(1);
$(this).removeClass('selected');
} else {
console.log(2);
$(this).addClass('selected');
}
});
//点击'first'标签,事件会触发两次,console结果为2和1
//点击'second'标签,事件触发一次,console结果为2/1
解决方法:
1、取消事件的默认动作:event.preventDefault();
<label class="first"><input type="checkbox"/>第一</label>
$('.first').off('click').on('click',function (event) {
event.preventDefault();
if ($(this).hasClass('selected')) {
console.log(1);
$(this).removeClass('selected');
} else {
console.log(2);
$(this).addClass('selected');
}
});
//点击'first'标签,事件触发一次,console结果为2/1
2、可以把事件绑定在input元素上。
<label class="first"><input type="checkbox" class="input"/>第一</label>
$('.first .input').off('click').on('click',function (event) {
event.preventDefault();
if ($(this).hasClass('selected')) {
console.log(1);
$(this).removeClass('selected');
} else {
console.log(2);
$(this).addClass('selected');
}
});
//点击'first'标签,事件触发一次,console结果为2/1
label标签内含有input元素,点击事件会触发两次的更多相关文章
- 点击label时click事件被触发两次的坑
今天帮群里的朋友看一段代码的时候偶然间遇到一个label的坑,点击label的时候,监听的click事件被执行两次: 具体代码如下: <div id="test"> & ...
- iOS中UITableView的cell点击事件不触发didSelectRowAtIndexPath(汇总)
iOS中UITableView的cell点击事件不触发didSelectRowAtIndexPath 首先分析有几种原因,以及相应的解决方法 1.UITableViewCell的userInterac ...
- 获取label标签内for的属性值-js
<body> <div class="row_2" id="ass"> <label for="aaa"> ...
- input元素的blur事件与定位在其上面的元素的点击(click)事件冲突的解决方法
在登录和注册框中,在input上定位一个清空内容的按钮. 但是给按钮的单击事件不生效. 解决的办法: 在blur的回调函数中加一个定时器,延迟blur回调函数的执行时间,这样的话虽然在点击div的时候 ...
- js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法
HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...
- 如何禁用事件的浮升(div的子元素的点击事件会触发父元素的点击事件)
<div onclick="alert();"> <div onclick="alert();"></div> </d ...
- js input radio点击事件
html代码: <input type="radio" name="myname" value="1" />1 <inpu ...
- [Vuejs] 点击单选框触发两次点击事件的处理
<el-radio-group v-model="uploadStatus" class="upload-status-radio"> <el ...
- Javascript和jquery事件--点击事件和触发超链接
前面的不过是一些基础的知识,真正的一些事件还是有点不同.还有一些命名空间的问题.不过现在ie也开始接受W3C标准,而且平时开发也很少考虑ie了,一些事件就不考虑ie了. 点击事件--click 大部分 ...
随机推荐
- linux目录详细列表
详细列表 目录 说明 备注 bin 存放普通用户可执行的指令 即使在单用户模式下也能够执行处理 boot 开机引导目录 包括Linux内核文件与开机所需要的文件 dev 设备目录 所有的硬件设备及周边 ...
- day19 python之re模块正则练习
1.匹配标签 import re ret = re.search("<(?P<tag_name>\w+)>\w+</(?P=tag_name)>" ...
- 【JavaScript】数组
[声明一个数组]var a=[1,1,1]; [定义数组的长度]var a=new Array(2); [特殊数组]arguments[0][可以不用声明,当数组内没有东西时可以直接通过方法的参数自动 ...
- react-native 导入高德地图
高德官网 : https://lbs.amap.com/ GitHub地址: https://github.com/qiuxiang/react-native-amap3d 安装的时候遇到错误:一般是 ...
- IP通信基础学习第三周(下)
TTL的最值是255. 数据部分不参与检验和的计算. 接收端的结果若为0,则保留:否则,会丢弃该数据报. IP数据报选项字段是可选的,主要用于网络测试和调试. IP辅助协议ICMP的消息类型有错误消息 ...
- SynchronousQueue------TransferStack源码分析
s,e在线程栈里面,TransferStack在堆里面,方法只是线程的执行逻辑.线程过来调用transfer方法,线程在堆里面创建一个节点,加到Stack里面去,然后这个线程归属节点的waiter,阻 ...
- Java多线程编程的常见陷阱
.在构造函数中启动线程 我在很多代码中都看到这样的问题,在构造函数中启动一个线程,类似这样: public class A{ public A(){ ; ; this.thread=new MyThr ...
- 顶尖 API 文档管理工具 (Yapi)
原文地址:https://www.jianshu.com/p/a97d2efb23c5
- python画手绘图
第一步:插入代码 #e17.1HandDrawPic.py from PIL import Image import numpy as np vec_el = np.pi/2.2 # 光源的俯视角度, ...
- Weekly Contest 119
第一题: 973. K Closest Points to Origin We have a list of points on the plane. Find the K closest poi ...