**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元素,点击事件会触发两次的更多相关文章

  1. 点击label时click事件被触发两次的坑

    今天帮群里的朋友看一段代码的时候偶然间遇到一个label的坑,点击label的时候,监听的click事件被执行两次: 具体代码如下: <div id="test"> & ...

  2. iOS中UITableView的cell点击事件不触发didSelectRowAtIndexPath(汇总)

    iOS中UITableView的cell点击事件不触发didSelectRowAtIndexPath 首先分析有几种原因,以及相应的解决方法 1.UITableViewCell的userInterac ...

  3. 获取label标签内for的属性值-js

    <body> <div class="row_2" id="ass"> <label for="aaa"> ...

  4. input元素的blur事件与定位在其上面的元素的点击(click)事件冲突的解决方法

    在登录和注册框中,在input上定位一个清空内容的按钮. 但是给按钮的单击事件不生效. 解决的办法: 在blur的回调函数中加一个定时器,延迟blur回调函数的执行时间,这样的话虽然在点击div的时候 ...

  5. js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法

    HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...

  6. 如何禁用事件的浮升(div的子元素的点击事件会触发父元素的点击事件)

    <div onclick="alert();"> <div onclick="alert();"></div> </d ...

  7. js input radio点击事件

    html代码: <input type="radio" name="myname" value="1" />1 <inpu ...

  8. [Vuejs] 点击单选框触发两次点击事件的处理

    <el-radio-group v-model="uploadStatus" class="upload-status-radio"> <el ...

  9. Javascript和jquery事件--点击事件和触发超链接

    前面的不过是一些基础的知识,真正的一些事件还是有点不同.还有一些命名空间的问题.不过现在ie也开始接受W3C标准,而且平时开发也很少考虑ie了,一些事件就不考虑ie了. 点击事件--click 大部分 ...

随机推荐

  1. 【论文速读】Sheng Zhang_AAAI2018_Feature Enhancement Network_A Refined Scene Text Detector

    Sheng Zhang_AAAI2018_Feature Enhancement Network_A Refined Scene Text Detector 作者 关键词 文字检测.水平文字.Fast ...

  2. 求方差分析与两样本T检验 区别

    方差分析与两样本T检验. 1.首先可以看到方差分析(ANOVA)包含两样本T检验,把两样本T检验作为自己的特例.因为ANOVA可以比较多个总体的均值,当然包含两个总体作为特例.实际上,T的平方就是F统 ...

  3. css基础教程

    css规则有两个主要部分构成:选择器,以及一条或多条声明. 值的不同写法和单位: 可以使用十六进制设置颜色值:#ff0000; 为节约字节,使用css缩写形式:#f00: 类选择器:以一个点号显示. ...

  4. c# WebApi之接口返回类型详解

    c# WebApi之接口返回类型详解 https://blog.csdn.net/lwpoor123/article/details/78644998

  5. [转载]URI、 URL 和 URN 的区别

    1. URI URI = Universal Resource Identifier 统一资源标志符 URI采用一种特定语法标识一个资源的字符串.所标识的资源可能是服务器上的一个文件.不过,也可能是一 ...

  6. java线程学习之synchronized关键字

    关键字synchronized的作用是实现线程间的同步.它的任务是对同步的代码加锁.一个代码块同时只能有同一个线程进行读和写操作,从而保证线程间是安全的. 线程安全的概念是:当多个线程访问某一个类(对 ...

  7. vue配置404页面

    { path:'*', name:"/404", component:cuowu } path星号表示没有这个路由 name表示去这个地址 component这个页面引入的时候叫的 ...

  8. 【记录】Linux安装jave-web环境

    依照教程记录 -java https://blog.csdn.net/a360616218/article/details/76736988 -tomcat https://www.cnblogs.c ...

  9. 4、网上收集Storm 讲解图

    1.Storm与Kafka集成 我们知道storm的作用主要是进行流式计算,对于源源不断的均匀数据流流入处理是非常有效的, 而现实生活中大部分场景并不是均匀的数据流,而是时而多时而少的数据流入,这种情 ...

  10. 组装一台PRUSA I3打印机

    闲来无事,又搞了台机.这样下去顶不住了.草. 还是咸鱼购买,但是这台收到的时候比我以前任何一台都要散,几乎重新装了一台. 此处省略收到货时候的零件图,省略装机图. 不得不提的是,原机用的山寨melzi ...