Mapbox的on和off

回调函数不起作用

1 描述

Mapbox的Map对象通过on方法绑定的监听事件，通过off方法取消绑定不起作用

2 代码

...
<el-row class="zl">
          <el-col :span="3" :offset="14">
            <el-button
              type="primary"
              icon="el-icon-close"
              circle
              v-show="isAdding"
              @click="cancelAdd"
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-plus"
              circle
              v-show="!isAdding"
              @click="addBookMarkEvent"
              style="cursor: pointer"
            ></el-button>
          </el-col>
          <el-col :span="7" >
            <el-button
              type="text"
              size="medium"
              v-show="isAdding"
              @click="cancelAdd"
              >stop adding</el-button
            ><el-button
              type="text"
              size="medium"
              v-show="!isAdding"
              @click="addBookMarkEvent"
              >新增</el-button
            >
          </el-col>
        </el-row>
...
addBookMarkEvent() {
      this.mapInit.map.on("click", this.clickEvent);
      this.mapInit.map.on("mousemove", this.mousemoveEvent);
    },
...
 cancelAdd() {
      this.mapInit.map.off("click");
      this.mapInit.map.off("mousemove");
    },
...

3 原因

以上代码是分别对两个按钮实现添加事件监听和取消事件监听。但是取消不起作用。
把cancelAdd函数修改如下：

cancelAdd() {
      this.mapInit.map.off("click", this.clickEvent);
      this.mapInit.map.off("mousemove", this.mousemoveEvent);
    },

把on绑定的回调函数传给off，可以准确解除之前添加的监听。绑定和取消绑定的回调函数应当为同一个声明函数，这样在取消绑定时，才能找到相应的回调函数。

4 源码

// src/ui/map.js
...
on(type: MapEvent, layerId: any, listener: any) {
        if (listener === undefined) {
            return super.on(type, layerId);
        }

        const delegatedListener = this._createDelegatedListener(type, layerId, listener);

        this._delegatedListeners = this._delegatedListeners || {};
        this._delegatedListeners[type] = this._delegatedListeners[type] || [];
        this._delegatedListeners[type].push(delegatedListener);

        for (const event in delegatedListener.delegates) {
            this.on((event: any), delegatedListener.delegates[event]);
        }

        return this;
    }
 
    off(type: MapEvent, layerId: any, listener: any) {
        if (listener === undefined) {
            return super.off(type, layerId);
        }

        const removeDelegatedListener = (delegatedListeners) => {
            const listeners = delegatedListeners[type];
            for (let i = 0; i < listeners.length; i++) {
                const delegatedListener = listeners[i];
                if (delegatedListener.layer === layerId && delegatedListener.listener === listener) {
                    for (const event in delegatedListener.delegates) {
                        this.off((event: any), delegatedListener.delegates[event]);
                    }
                    listeners.splice(i, 1);
                    return this;
                }
            }
        };

        if (this._delegatedListeners && this._delegatedListeners[type]) {
            removeDelegatedListener(this._delegatedListeners);
        }

        return this;
    }
...

此处实际调用的为

// src/util/evented.js
...
    on(type: *, listener: Listener): this {
        this._listeners = this._listeners || {};
        _addEventListener(type, listener, this._listeners);

        return this;
    }

    off(type: *, listener: Listener) {
        _removeEventListener(type, listener, this._listeners);
        _removeEventListener(type, listener, this._oneTimeListeners);

        return this;
    }
...