label标签内含有input元素，点击事件会触发两次
2024-10-15 15:23:46
**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
最新文章
- mongodb
- Thinking in java学习笔记之String的不可变性
- Linux文件处理命令
- 笔记13：File 类的一些操作
- Navicat(连接) -1之常规设置
- （转）Python JSON序列化
- CSS3 照片墙
- PDF模板报表导出（Java+Acrobat+itext）
- 无法读取配置节 system.serviceModel 因为它缺少节声明的解决方法
- 转-Gitorious搭建步骤
- centos7zabbix-agen安装
- python内存数据库pydblite
- mvc view获取url参数
- Sprint Boot入门（1）：创建第一个Spring Boot应用
- [转]ViewPager学习笔记（一）——懒加载
- 软件版本GA,RC,alpha,beta,Build 含义
- 网络攻防工具介绍——Metasploit
- 多github帐号的SSH key切换
- web.py学习遇到的问题
- 彩色图像直方图均衡（Histogram Equalization）