下载鸥 > 网站下载 > 开发教程 > 前端开发

为什么jQuery的click事件会触发两次?

65 2024-06-06 01:13:41

收藏
今天有客户找鸥哥排查一个bug,说click事件触发了两次,源码如下。
 

html代码

<div class="form-checkbox rememberbox">
    <input type="checkbox" id="remember-me" class="form-checkbox-input" value="">
    <label id="remember-me" class="form-label">
        <span class="checkbox" aria-hidden="true"></span> 记住我
    </label>
</div>
 

带bug的js代码

$(".rememberbox").click(function(){
    console.log('clicked');
    if($(this).hasClass("active")){
        $(this).removeClass("active");
        $("#remember-me").val("");
    }else{
        $(this).addClass("active");
        $("#remember-me").val("1");
    }
})

每次点击,都打印了两次clicked。

那么,这是什么原因呢?
 

原因分析

如果点击事件处理器被绑定了包含 <input type="checkbox"> 和 <label> 的容器元素,这一般就是 <label> 与其关联的 <input> 之间的默认行为导致的。

在HTML中,点击与 <input> 关联的 <label> 会自动触发 <input> 的点击事件。因此,如果点击事件处理器同时绑定在包含这两者的父元素上,那么点击 <label> 可能会导致处理器被触发两次:

一次是因为直接点击了 <label>,另一次是因为 <label> 触发了关联的 <input> 的点击事件,而这个事件又冒泡到了父元素。

解决方案也很简单,绑定的点击事件换到label上就好了
 

优化后的js

$("#remember-me-label").click(function(){
    console.log('clicked');
    event.stopPropagation();
    if($(this).parent(".rememberbox").hasClass("active")){
        $(this).parent(".rememberbox").removeClass("active");
        $("#remember-me").val("");
    }else{
        $(this).parent(".rememberbox").addClass("active");
        $("#remember-me").val("1");
    }
})

本文地址:https://xzo.com.cn/develop/js/1235.html

有帮助,很赞!

信息来源:下载鸥
导出教程 下载word版教程
发表评论 共有条评论
关于前端开发


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。

推荐前端开发开发教程
JS怎样做倒计时效果?
JS怎样做倒计时效果?

在各种盛大的节日、活动前,网站制作倒计时特效可有效给活动页引流。那么,怎样...

1 412
通过原生的JS实现点击复制效果
通过原生的JS实现点击复制效果

对于网站、app开发等工作而言,复制是一个非常常见的功能。很多人到处找插件...

1 394
jQuery怎样监听鼠标滚动是向上还是向下的状态?
jQuery怎样监听鼠标滚动是向上还是向下的状态?

知乎鼠标向下滚动显示文章标题,向上滚动显示栏目;又或者向下滚动到底部时异步...

0 522
$(window).height() 和 $(document).height()有什么不同?
$(window).height() 和 $(document).height()有什么不同?

我们常用$(window).height() 和 $(document).height()来监听当前高度,但这个...

1 369
JS点击复制data-*属性(支持多个元素)
JS点击复制data-*属性(支持多个元素)

分享一段js原生点击复制data-*属性的源码,根据onclick事件触发,复制当前元素...

0 358
js点击追加信息到textarea
js点击追加信息到textarea

通过灵活运用js,我们可以轻松实现点击追加相关信息到textarea的功能。这个功...

0 536
js判断windows操作系统还是mac os系统
js判断windows操作系统还是mac os系统

网站日常访客主要是windows和mac os两种操作系统,如果网站提供资源下载,则需...

0 1641
jQuery怎样给图片添加默认域名?
jQuery怎样给图片添加默认域名?

在很多网站中,图片的默认路径是相对于根目录的绝对路径,如果是其他站点引用,则...

0 417
推荐插件
帝国cms纳米数据接口(足球比赛中最新数据)
帝国cms纳米数据接口(足球比赛中最新数据)

帝国cms 对接纳米数据(www.nami.com)接口,本接口主要接收、整理足球比赛实时数...

0 284
帝国cms访问统计ip地址链接与封禁插件下载
帝国cms访问统计ip地址链接与封禁插件下载

下载鸥开发了这款帝国cms封禁ip插件,自动记录访问情况,让我们可以更快的识别...

0 936
帝国cms自动生成文章新闻目录插件下载
帝国cms自动生成文章新闻目录插件下载

用户体验是我们的需求,百度蜘蛛的认可更是我们的需求。毕竟,没有收录排名,何来...

0 1045
帝国cms网站会员登录与退出历史记录日志插件
帝国cms网站会员登录与退出历史记录日志插件

帝国cms默认只有上次登录时间与ip,没有一个记录清单,所以今天,我们分享这个帝...

0 352
帝国cms百度AI图像清晰度增强api接口对接插件
帝国cms百度AI图像清晰度增强api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像清晰度增强的功能。经...

0 477
帝国cms在线考试系统模板插件
帝国cms在线考试系统模板插件

一直没看到好用的帝国cms在线考试插件,所以自己开发了一款。在线考试插件用...

0 1219
帝国cms多栏目多数据表自动审核推送插件
帝国cms多栏目多数据表自动审核推送插件

本插件基于帝国cms帝国cms每日自动审核插件,在自动审核指定条数信息的基础上...

0 850
帝国cms自动给正文关键词添加tag内链
帝国cms自动给正文关键词添加tag内链

帝国cms有自带的给关键词添加内链功能,但需要手动添加关键词,容易出现疏漏和...

0 772
客服QQ:341553759
扫码咨询 常见问题 >
官方交流群:90432500
点击加入