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 大部分 ...
随机推荐
- 用Volume在主机和Docker容器文件传输
1.使用Volume在主机和容器之间传输文件. 在官方文档中可以看到使用如下命令即可创建一个volume: Create a volume: $ docker volume create my-vol ...
- C++中浮点数比较大小,即小数比较大小
浮点数比较大小,由于精度问题,所以直接比较有时可能会出错. 单精度数7位有效数字. (float)双精度数16位有效数字.(double) 单精度数的尾数用23位存储,加上默认的小数点前的1位1,2^ ...
- [python 练习] 计算个税
题目:利用python计算个税 说明:python有序字典的使用 代码: # -*- coding: utf-8 -*- from collections import OrderedDict # 税 ...
- (转载记录)Active Directory 灾难恢复
部分适用于Windows Server 2003. 在IT环境中谁也不能保证软硬件永远没有故障:那么就需要我们IT能够未雨绸缪,尽量避免故障发生,如果故障发生了,我们需要把损失降到最小:那么就需要我们 ...
- python itertools 模块
Python的内建模块itertools提供了非常有用的用于操作迭代对象的函数 首先,我们看看itertools提供的几个“无限”迭代器: >>> import itertools ...
- C#发送内置图片的html格式邮件的代码
将写内容过程经常用的内容段备份一次,下面的内容是关于C#发送内置图片的html格式邮件的内容,应该对码农们也有用处.MailMessage m = new MailMessage();m.Subjec ...
- jQuery的deferred对象使用详解
转自: https://www.cnblogs.com/PengLee/p/5657101.html jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本.每个版本都会引入一些新功能. ...
- HTTP请求中GET和POST的区别
一.原理区别 一般我们在浏览器输入一个网址访问网站都是GET请求;再FORM表单中,可以通过设置Method指定提交方式为GET或者POST提交方式,默认为GET提交方式. HTTP定义了与服务器交互 ...
- vue的三种通信方式
一 确定组件关系二 使用第一步确定的组件关系在下面找到使用方法 1 父子通信(子组件使用父组件数据渲染) a) 在 子组件 中添加props props: [自定义prop名字] b) 在子组件中把自 ...
- 安卓GreenDao(基础)
GreenDao的基础使用很简单,网上一大筐,推荐在简书里面搜索,那么我这里要说些什么呢,试想,这些简单的Demo可以带你了解GreenDao,但你能用这些代码做公司的项目么,肯定不行,所以我结合自身 ...