vue项目中百度地图开发多边形电子围栏打点解决js监听重复

  1.    addClickEvent() {
  2.         //此处为关键点：如果这个全局变量不为空，说明当前已经绑定了一个监听，所以需要移除
  3.        if (this.events != null) {
  4.            this.map.removeEventListener('click', this.events, false);
  5.        }
  6.         //此处给该公共参数重新赋值方法
  7.        this.events = (e) => {
  8.            if (this.addForm.eara.length > 1) {
  9.                this.creatPoint = false;
  10.            }
  11.            if (this.addForm.eara.length > 7) {
  12.                this.$message({
  13.                    message: '最多选择8个坐标',
  14.                    type: 'info'
  15.                });
  16.                return false;
  17.            }
  18.            this.addForm.eara.push({
  19.                lng: e.point.lng, lat: e.point.lat
  20.            });
  21.            var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));
  22.            marker.type = 'marker';
  23.            this.map.addOverlay(marker);
  24.        }
  25.         //添加监听，此时添加监听不会出现重复监听的情况
  26.        this.map.addEventListener('click', this.events, false);
  27.    },

原生解决方式

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