前端代码中的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. 浅谈6种JS数组遍历方法的区别

    本篇文章给大家介绍一下6种JS数组遍历方法:for.foreach.for in.for of.. each. ().each的区别.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...

  2. vue怎么自定义组件

    我们在搭建好的手脚架中 进行使用 一.在src =>components => 创建XXbtn文件夹用来存放你的组件 =>在创建一个vue的文件 . 二.在src => com ...

  3. 第 13 篇：DRF 框架之 API 版本管理

    作者:HelloGitHub-追梦人物 API 不可能一成不变,无论是新增或者删除已有 API,都会对调用它的客户端产生影响.如果对 API 的增删没有管理,随着 API 的增增减减,调用它的客户端就 ...

  4. vue+axios+springboot文件下载

    //前台代码 <el-button size="medium" type="primary" @click="downloadFile" ...

  5. vue学习(十五) 过滤器简单实用

    vue过滤器: 概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化.过滤器可以用在两个地方:插值表达式   v-bind表达式  由管道符指示 //过滤器调用时候的格式 {{ name ...

  6. Entry基本用法

    1.BooleanVar() 布尔类型 2.IntVar() 整数类型 3.DoubleVar() 浮点数类型 4.StringVar() 字符串类型 5.self.entry1 = Entry(se ...

  7. P4491 [HAOI2018]染色 广义容斥 NTT 生成函数

    LINK:染色 算是比较常规的广义容斥. 算恰好k个 可以直接转成至少k个. 至少k个非常的好求 直接生成函数. 设\(g_k\)表示至少有k个颜色是满足的 那么有 \(g_k=C(m,k)\frac ...

  8. 4.13 省选模拟赛 传销组织 bitset 强连通分量 分块

    考试的时候昏了头 没算空间 这道题我爆零了.值得注意的是 一般认为bitset的空间是 int 的1/w倍 对于那m条边 无论如何构造 这m条关系都是存在的 题目其实是想让我们用这m条关系来计算给出的 ...

  9. Java垃圾回收原来这么简单

    什么是垃圾回收? 垃圾回收(Garbage Collection,GC),顾名思义就是释放垃圾占用的空间,防止内存泄露.有效的使用可以使用的内存,对内存堆中已经死亡的或者长时间没有使用的对象进行清除和 ...

  10. 【小白学AI】线性回归与逻辑回归（似然参数估计）

    文章转自[机器学习炼丹术] 线性回归解决的是回归问题,逻辑回归相当于是线性回归的基础上,来解决分类问题. 1 公式 线性回归(Linear Regression)是什么相比不用多说了.格式是这个样子的 ...