**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. linux目录详细列表

    详细列表 目录 说明 备注 bin 存放普通用户可执行的指令 即使在单用户模式下也能够执行处理 boot 开机引导目录 包括Linux内核文件与开机所需要的文件 dev 设备目录 所有的硬件设备及周边 ...

  2. day19 python之re模块正则练习

    1.匹配标签 import re ret = re.search("<(?P<tag_name>\w+)>\w+</(?P=tag_name)>" ...

  3. 【JavaScript】数组

    [声明一个数组]var a=[1,1,1]; [定义数组的长度]var a=new Array(2); [特殊数组]arguments[0][可以不用声明,当数组内没有东西时可以直接通过方法的参数自动 ...

  4. react-native 导入高德地图

    高德官网 : https://lbs.amap.com/ GitHub地址: https://github.com/qiuxiang/react-native-amap3d 安装的时候遇到错误:一般是 ...

  5. IP通信基础学习第三周(下)

    TTL的最值是255. 数据部分不参与检验和的计算. 接收端的结果若为0,则保留:否则,会丢弃该数据报. IP数据报选项字段是可选的,主要用于网络测试和调试. IP辅助协议ICMP的消息类型有错误消息 ...

  6. SynchronousQueue------TransferStack源码分析

    s,e在线程栈里面,TransferStack在堆里面,方法只是线程的执行逻辑.线程过来调用transfer方法,线程在堆里面创建一个节点,加到Stack里面去,然后这个线程归属节点的waiter,阻 ...

  7. Java多线程编程的常见陷阱

    .在构造函数中启动线程 我在很多代码中都看到这样的问题,在构造函数中启动一个线程,类似这样: public class A{ public A(){ ; ; this.thread=new MyThr ...

  8. 顶尖 API 文档管理工具 (Yapi)

    原文地址:https://www.jianshu.com/p/a97d2efb23c5

  9. python画手绘图

    第一步:插入代码 #e17.1HandDrawPic.py from PIL import Image import numpy as np vec_el = np.pi/2.2 # 光源的俯视角度, ...

  10. Weekly Contest 119

    第一题: 973. K Closest Points to Origin  We have a list of points on the plane.  Find the K closest poi ...