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 大部分 ...
随机推荐
- NuGet的简单使用
什么是NuGet? NuGet(读作New Get)是用于微软.NET开发平台的软件包管理器,是一个Visual Studio的扩展.在使用Visual Studio开发基于.NET Framewor ...
- Jmeter笔记(Ⅲ) Jmeter的非GUI操作
在启动Jmeter时,我们会看到这样一句提示: 不要使用GUI模式(界面模式)进行负载测试,GUI模式只能用于创建测试和调试.进行负载测试时,需要时用非GUI模式. 那么为什么进行负载测试时一定要用非 ...
- Sublime text 替换成对标签 首尾匹配的HTML 标签
按Cmd-Shift-K (Win: Ctrl-Shift-') 就能选中这组标签
- Appium+Python3+iOS真机环境搭建
Appium 是一个自动化测试开源工具,支持 iOS 平台和 Android 平台上的原生应用,web 应用和混合应用. 本次环境配置相关:macOS:10.13.4Appium-desktop:1. ...
- css的扩展技术
CSS的扩展技术 (在原来的CSS语言的基础上扩展了js,可以在里面写js ) 一.less 定义: @color:red; //定义颜色 @body-color:blue; @div-color:y ...
- OSM自建服务
1. 安装PostgreSQL. 2. 安装PostGis(安装目录为PostgreSQL目录). 3. 安装osm2pgsql. osm2pgsql下载地址:http://customdebu ...
- CCF CSP 201809-1 卖菜
题目链接:http://118.190.20.162/view.page?gpid=T79 问题描述 试题编号: 201809-1 试题名称: 卖菜 时间限制: 1.0s 内存限制: 256.0MB ...
- sqlServer区分大小写查询
sql server默认不区分大小写查询,但是有的时候部分查询语句却需要区分大小写查询,这个时候就需要进行一些特殊处理.区分大小写主要分两种方法. 转二进制判断 select * from table ...
- C# RSA加解密与验签,AES加解密,以及与JAVA平台的密文加解密
前言: RSA算法是利用公钥与密钥对数据进行加密验证的一种算法.一般是拿私钥对数据进行签名,公钥发给友商,将数据及签名一同发给友商,友商利用公钥对签名进行验证.也可以使用公钥对数据加密,然后用私钥对数 ...
- 就是要用Vim写Vue
Vim关于Vue的生态链还是很少,不过凑活凑活还是能用的. 缩进 缩进采用的是两个空格,.vimrc配置: au BufNewFile,BufRead *.html,*.js,*.vue set ta ...