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 大部分 ...
随机推荐
- 【论文速读】Sheng Zhang_AAAI2018_Feature Enhancement Network_A Refined Scene Text Detector
Sheng Zhang_AAAI2018_Feature Enhancement Network_A Refined Scene Text Detector 作者 关键词 文字检测.水平文字.Fast ...
- 求方差分析与两样本T检验 区别
方差分析与两样本T检验. 1.首先可以看到方差分析(ANOVA)包含两样本T检验,把两样本T检验作为自己的特例.因为ANOVA可以比较多个总体的均值,当然包含两个总体作为特例.实际上,T的平方就是F统 ...
- css基础教程
css规则有两个主要部分构成:选择器,以及一条或多条声明. 值的不同写法和单位: 可以使用十六进制设置颜色值:#ff0000; 为节约字节,使用css缩写形式:#f00: 类选择器:以一个点号显示. ...
- c# WebApi之接口返回类型详解
c# WebApi之接口返回类型详解 https://blog.csdn.net/lwpoor123/article/details/78644998
- [转载]URI、 URL 和 URN 的区别
1. URI URI = Universal Resource Identifier 统一资源标志符 URI采用一种特定语法标识一个资源的字符串.所标识的资源可能是服务器上的一个文件.不过,也可能是一 ...
- java线程学习之synchronized关键字
关键字synchronized的作用是实现线程间的同步.它的任务是对同步的代码加锁.一个代码块同时只能有同一个线程进行读和写操作,从而保证线程间是安全的. 线程安全的概念是:当多个线程访问某一个类(对 ...
- vue配置404页面
{ path:'*', name:"/404", component:cuowu } path星号表示没有这个路由 name表示去这个地址 component这个页面引入的时候叫的 ...
- 【记录】Linux安装jave-web环境
依照教程记录 -java https://blog.csdn.net/a360616218/article/details/76736988 -tomcat https://www.cnblogs.c ...
- 4、网上收集Storm 讲解图
1.Storm与Kafka集成 我们知道storm的作用主要是进行流式计算,对于源源不断的均匀数据流流入处理是非常有效的, 而现实生活中大部分场景并不是均匀的数据流,而是时而多时而少的数据流入,这种情 ...
- 组装一台PRUSA I3打印机
闲来无事,又搞了台机.这样下去顶不住了.草. 还是咸鱼购买,但是这台收到的时候比我以前任何一台都要散,几乎重新装了一台. 此处省略收到货时候的零件图,省略装机图. 不得不提的是,原机用的山寨melzi ...