前端代码中的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. 因为mac不支持移动硬盘的NTFS格式，mac电脑无法写入移动硬盘的终极解决办法

    相信很多实用mac的同学,都有磁盘容量问题,所以才使用移动硬盘 当移动硬盘在windows电脑上使用过之后,会被格式化为NTFS格式 而mac电脑不支持NTFS格式 这里有两种方法 第一种是把移动硬盘 ...

  2. [jvm] -- 垃圾收集算法篇

    垃圾收集算法 标记-清除算法 首先标记出所有需要回收的对象,在标记完成后统一回收所有被标记的对象. 缺点: 效率问题: 空间问题(标记清除后会产生大量不连续的碎片) 复制算法 它可以将内存分为大小相同 ...

  3. vue的自定义指令。directive

    在vue中有很多vue自带的指令,比如v-heml.v-for.v-if,v-on.v-bind.v-else.v-show. 但是这些指令还不够我们使用的.就有了directive这个对象. 这个使 ...

  4. Python 简明教程 --- 26，Python 多进程编程

    微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 学编程最有效的方法是动手敲代码. 目录 1,什么是多进程 我们所写的Python 代码就是一个程序, ...

  5. Django学习路35_视图使用方法(复制的代码) + 简单总结

    from django.shortcuts import render,redirect from django.http import HttpResponse,JsonResponse from ...

  6. Hexo 静态博客指南：建站教程（中）

    本文最初发布于我的个人博客Bambrow's Blog,采用 BY-NC-SA 许可协议,转载请注明出处.若有后续更新,将更新于原博客.欢迎去我的博客阅读更多文章! 本文详细记录一下站点建立过程,以便 ...

  7. try{}catch的隐藏(如何优雅的实现异常块)

    在项目中,我们会遇到异常处理,对于运行时异常,需要我们自己判断处理.对于受检异常,需要我们主动处理. 但是繁琐的try{}caht嵌套在代码里,看着很不舒服,这里我们不讨论性能,就代码来讲,来看看如何 ...

  8. UOJ #22 UR #1 外星人

    LINK:#22. UR #1 外星人 给出n个正整数数 一个初值x x要逐个对这些数字取模 问怎样排列使得最终结果最大 使结果最大的方案数又多少种? n<=1000,x<=5000. 考 ...

  9. 问题记录，php webserver端跨子域setcookie后浏览器不存

    如题. path已设置成/,domain也已指定成父级域名,数据包response中可见Set-Cookie header为期望的cookie数据,但浏览器就是不接收.存储该cookie, 浏览器端也 ...

  10. 最优化算法【牛顿法、拟牛顿法、BFGS算法】

    一.牛顿法 对于优化函数\(f(x)\),在\(x_0\)处泰勒展开, \[f(x)=f(x_0)+f^{'}(x_0)(x-x_0)+o(\Delta x) \] 去其线性部分,忽略高阶无穷小,令\ ...