前端代码中的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. 围绕一个 volatile 关键字居然可以问出来 16 个问题

    对于 Java 每次面试就会想到多线程,多线程问题基本跑不了要问一下 volalite 关键字,可是我万万没想到居然一个 volatile 关键字可以连续问题出来 16 个问题!看下你能回答出来几个? ...

  2. 用Tableau制作官网流量周报

    好久没写博客了,上班摸鱼时间分享一下在工作中做的东西吧,先上图. 数据方面取自百度统计,身处传统类型公司,官网没有数据库,只好将就一下啦,反正是免费的,体验也还可以. 关于百度统计注册.添加管理站点和 ...

  3. java opencsv解析csv文件

    记一次使用opencsv解析csv文件时碰到的坑 最近在开发过程中需要解析csv文件,公司用的解析工具是opencsv,在根据opencsv的官方文档去解析时发现csv文件中含有繁体字,使用其自带的C ...

  4. 题解 SP687 【REPEATS - Repeats】

    考虑可以枚举字符串上的两个点,求出两个点所对应后缀的\(LCP\)和所对应前缀的\(LCS\),两点之间的距离为\(len\),则这两个点对答案的贡献为: \[ \frac{LCS+LCP+L-1}{ ...

  5. springboot+redis做事件过期通知业务

    springboot+redis做事件过期通知 博主也是初次体验,不足之处多多指教 我的业务场景 系统管理员要给维护员分配巡查路口设施的工作,由于路口比较多,管理员不知道哪些路口已经被分配了,况且过了 ...

  6. DJANGO-天天生鲜项目从0到1-014-订单-订单评论

    本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习 https://www.bilibili.com/video/BV1vt41147K8?p= ...

  7. 深入理解golang：sync.map

    疑惑开篇 有了map为什么还要搞个sync.map 呢?它们之间有什么区别? 答:重要的一点是,map并发不是安全的. 在Go 1.6之前, 内置的map类型是部分goroutine安全的,并发的读没 ...

  8. transaction already active

    这个问题是使用spring 事务管理时经常出现的错误,最开始时相当令我头疼,也不知道是哪里出现的问题.在网上找了一阵后,依然无解.意思就是说上一个事务处于激活状态中,不能开始新的数据库更新操作. // ...

  9. 《Python编程第4版 上》高清PDF|百度网盘免费下载|Python基础编程

    <Python编程第4版 上>高清PDF|百度网盘免费下载|Python基础编程 提取码:8qbi  当掌握Python的基础知识后,你要如何使用Python?Python编程(第四版)为 ...

  10. sqlzoo - SELECT from WORLD Tutorial 答案

    01.SELECT from WORLD Tutorial 01.显示所有国家的名称,大洲和人口. SELECT name, continent, population FROM world; 02. ...