解决 js addEventListener重复监听

记录JavaScript开发遇到的问题

解决 js addEventListener重复监听

• 参考文章 https://blog.csdn.net/aa494661239/article/details/103404241
• 百度地图开发解决监听重复

  this.events = null;//定义全局变量
  addClickEvent() {
  //此处为关键点：如果这个全局变量不为空，说明当前已经绑定了一个监听，所以需要移除
     if (this.events != null) {
         this.map.removeEventListener('click', this.events, false);
     }
     //此处给该公共参数重新赋值方法
     this.events = (e) => {
         //function
     }
     //添加监听，此时添加监听不会出现重复监听的情况
     this.map.addEventListener('click', this.events, false);
  }

• 原生方式

  <script>
      var delFunc = null;//定义全局变量
      function test(){
          //使用for循环模拟多次添加监听场景
          for(var i = 0; i < 10; i++){
              //此处为关键点：如果这个全局变量不为空，说明当前已经绑定了一个监听，所以需要移除
              if(delFunc != null){
                  document.getElementById("testBut").removeEventListener("click", delFunc);
              }
              
              //此处给该公共参数重新赋值方法
              delFunc = function () {
                  console.log('监听执行方法');
              };
   
              //添加监听，此时添加监听不会出现重复监听的情况
              document.getElementById("testBut").addEventListener("click", delFunc);
          }
      }
  </script>

赏

谢谢你请我吃糖果

支付宝

微信