**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. Oracle函数中对于NO_DATA_FOUND异常处理的研究

    一直以来有一个困惑,一直没解决,昨天一哥们问我这个问题,决心弄清楚,终于得到了答案.先看下面这个函数: create or replace function fn_test(c_xm varchar) ...

  2. [React Native] change port when running react native

    Two ways to do that. First, use this module to do that, https://github.com/ktonon/react-native-port- ...

  3. 已有的PHP安装gd扩展

    第一步 安装依赖 1.安装xpm yum install libXpm-devel 2.安装zlib wget http://zlib.net/zlib-1.2.8.tar.gz tar -xzvf ...

  4. openwrt路由器进入安全模式

    openwrt路由器型号:WNDR3800 一.实验背景 在pc机上通过xshell软件登录openwrt路由器,pc机通过网线与openwrt路由器的LAN接口相连.openwrt路由器自带两块无线 ...

  5. IO流(一)

    一.异常 概述 异常就是Java程序在运行过程中出现的错误. 由来 问题也是现实生活中一个具体事务,也可以通过java的类的形式进行描述,并封装成对象.其实就是Java对不正常情况进行描述后的对象体现 ...

  6. FineUI 相关

    FineUI 相关(ExtAsp.Net 2008-2017),记在这把,免得找不到了. 不知道同年代的类似项目Coolite怎么样了?更名为Ext.net了,在国外活得还算滋润,在国内嘛..死贵死贵 ...

  7. SDK?JDK?JDK 下载、安装、配置图文教程

    什么是软件开发工具包(SDK)   开发一个软件,需要经过编辑.编译.调试.运行几个过程. 编辑:使用编程语言编写程序代码的过程. 编译:如上一节所讲,就是将编写的程序进行翻译. 调试:程序不可能一次 ...

  8. dos模式下切换电脑用户

    启用管理员运行dos 然后输入net user adminstrator /active.yes 然后点击打开按钮 就可以切换电脑用户了

  9. Python 嘉宾列表问题

    某书上的练习题,当作复习8 #3-5 修改嘉宾名单 def alter(someone, other): if someone in din_list: din_list.remove(someone ...

  10. centos6.5 MySQL数据库的安装

    <div id="home"><div id="header"> <div id="blogTitle"> ...