前端代码中的js文件如果是动态引入的或者是某个事件操作进行注册的，那么重复的引入js文件或者多次触发注册事件会导致事件多次进行注册，造成不必要的麻烦，所以需要在每次注册之前将先前的事件进行取消，下面以按钮的注册点击事件为例进行说明：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="../css_com/reset.css">

    <style>

    </style>

    <!--网络cdn提供jquery,自己下载好引用一样-->

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

</head>

<body>

<input type="button" value="按钮1" id="btn">

<input type="button" value="按钮2" id="btn2">

<script>

//    为了防止多次注册事件，所以在每次注册之前需要提前将之前注册的点击事件去掉

    $(function(){

        $("#btn").click(function(){

            $("body").off("click","#btn2").on("click","#btn2",function(){

                alert("注册成功");

            });

        });

    });

</script>

</body>

</html>

　　

防止多次引入js文件导致的重复注册点击事件的更多相关文章

  1. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  2. 1.在html中引入js文件和Jquery框架

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jsp引入js文件

    转自:http://blog.csdn.net/ppzhangj/article/details/7859628 1)引入的js文件出错, 检查方法:将Js的内容写在当前的页面的<script& ...

  4. Vue在单独引入js文件中使用ElementUI的组件

    Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...

  5. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  6. vue引入js文件时报This dependency was not found:错误

    vue引入js文件时报This dependency was not found:错误 使用了很多方法,原来是这么小的问题,特此记录 解决办法 添加 ./

  7. 使用其他服务器引入JS文件

    使用其他服务器引入JS文件,1,减轻服务器压力2,速度快3,可以缓存 cdnjs库,更新比较快https://cdnjs.com/ cdn库 引入JS文件如:jquerybootcdn : https ...

  8. 用maven创建项目引入js文件位置

    用maven创建项目引入js文件位置 截图如下:

  9. jsp文件引入js文件的方式（项目部署于web容器中）

    在页面中引入javascript文件的方式是多种多样的,本文介绍两种. 通过<script>标签插入js文件 通过这种方式引入的js,写对js文件和jsp文件的路径很重要.下面给出一个项目 ...

随机推荐

  1. ciscn_2019_c_1

    0x01 检查文件,64位 检查开启的保护情况 开启了NX保护 0x02 IDA静态分析 在主函数这里并没有常见的gets栈溢出,尝试再这里面的子函数找找,发现了encrypt函数,进去查看 发现这个 ...

  2. ztree : 增删改功能demo与自定义DOM功能demo的结合

    最近有个项目要用ztree,需要用ztree自带的功能(增删改),也需要自定义DOM的功能(置顶). ztree的demo里有增删改的demo,也有自定义DOM的demo,但没有两者结合的. 所以我把 ...

  3. chrome浏览器hover时文字抖动bug

    今天发现一个奇怪的bug,chrome浏览器里面  当父标签定位为fixed时,hover里面子标签时,文本会发生抖动,百思不得其解,经过多方查证,发现解决办法 -webkit-transform:  ...

  4. Java 异常处理专题，从入门到精通

    内置异常和Throwable核心方法 Java内置异常 可查异常(必须要在方法里面捕获或者抛出) ClassNoFoundException 应⽤程序试图加载类,找不到对应的类 IllegalAcce ...

  5. 浅谈NTLM Hash

    认识Windows Hash 早期SMB协议在网络上传输明文口令.后来出现LAN Manager 挑战/响应验证机制(LM),其很容易破解,因此微软提出了WindowsNT挑战/响应验证机制(NTLM ...

  6. It还是高薪行业不？—软件测试

    It还是高薪行业不?—软件测试 谁都希望拿高薪,但是并不是所有人.所有地方都能的:甚者培训出来还不能就业的大有人在,也不是所有人都适合培训后就业(年龄.学历.专业.期望就业地点.不同行业转行还是有很大 ...

  7. PHP tmpfile() 函数

    定义和用法 tmpfile() 函数以读写(w+)模式创建一个具有唯一文件名的临时文件. 语法 tmpfile() 提示和注释 注释:临时文件会在文件关闭后(用 fclose())或当脚本结束后自动被 ...

  8. 牛客练习赛60 D 斩杀线计算大师

    LINK:斩杀线计算大师 给出a,b,c三个值 求出 ax+by+cz=k的x,y,z的正整数解 保证一定有解. 考虑两个数的时候 ax+by=k 扩展欧几里得可以解决. 三个数的时候 一个暴力的想法 ...

  9. mysql优化：explain 和 profile

    此文转自:https://blog.csdn.net/hanjungua8144/article/details/84317829 一.SQL查询语句优化基本思路和原则 优化更需要优化的Query.定 ...

  10. zabbix 邮件报警和微信报警

    # 邮件报警 一.定义邮件发件人 #密码来源 完成操作会看到 二.定义邮件收件人 三.启动动作 #先开启 2.触发操作 3.恢复操作 4.开启发送消息 1.2. 微信报警 一. 首先要注册一个企业微信 ...