前端代码中的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. 机器学习实战---K均值聚类算法

    一:一般K均值聚类算法实现 (一)导入数据 import numpy as np import matplotlib.pyplot as plt def loadDataSet(filename): ...

  2. javascript实战 : 简单的颜色渐变

    HTML <div id="color"></div> CSS .item{ display:inline-block; margin:10px; widt ...

  3. springboot+junit测试

    文章目录 一.junit断言 二.测试模块 三.使用Mockito作为桩模块 四.使用mockMvc测试web层 五.批量测试和测试覆盖率 参考视频:用Spring Boot编写RESTful API ...

  4. 硬核干货：5W字17张高清图理解同步器框架AbstractQueuedSynchronizer

    前提 并发编程大师Doug Lea在编写JUC(java.util.concurrent)包的时候引入了java.util.concurrent.locks.AbstractQueuedSynchro ...

  5. three.js 欧拉角和四元数

    这篇郭先生就来说说欧拉角和四元数,欧拉角和四元数的优缺点是老生常谈的话题了,使用条件我就不多说了,我只说一下使用方法. 1. 欧拉角(Euler) 欧拉角描述一个旋转变换,通过指定轴顺序和其各个轴向上 ...

  6. CSS样式基础2

    CSS: 一.常用样式:字体,颜色,背景 二.布局:浮动  定位  标签特性 三.标签盒子模型: 边距  边框 四.动画:旋转 渐变 注意:子标签会继承父标签的样式但不是所有的样式都会被继承. 1.1 ...

  7. Mac Sourcetree克隆项目提示无效的url

    之前用SoucreTree拉去过另一个账号的git项目,今天创建了一个新的码云账号,克隆里面的项目是一直报错误 > 错误如下: > 原因以及解决方案:

  8. vue多个路由复用同一个组件的跳转问题（this.router.push）

    因为router-view传参问题无法解决,比较麻烦. 所以我采取的是@click+this.router.push来跳转 但是现在的问题是跳转后,url改变了,但是页面的数据没有重新渲染,要刷新才可 ...

  9. 线程_multiprocessing实现文件夹copy器

    import multiprocessing import os import time import random def copy_file(queue,file_name,source_fold ...

  10. Linux之iptables原理详解

    目录: 一.netfilter与iptables 二.filter.nat.mangle等规则表 三.INPUT.FORWARD等规则链和规则 四.Linux数据包路由原理 五.iptables编写规 ...