如何在 OpenLayers 3 中删除监听器

Question

我在 Whosebug 上 copy 提出了我的问题，因为在 gis.stackexchange 我的所有问题都没有引起任何注意 - 很多时候我无法在那里得到简单问题的答案。所以，我现在的问题是如何删除这样定义的监听器：

map.getViewport().addEventListener('click', function (e){
   console.log("clicked");      
});

Answer 1

删除第一件事就是声明一个附加到点击的外部函数然后使用 removeEventListener

删除它

像这样

function myFunction(event){
   //some stuff 
   console.log("clicked");   
}

map.getViewport().addEventListener('click',myFunction);

然后通过

删除它

map.getViewport().removeEventListener('click',myFunction);

就这些了

这是一个片段

function myfunction(e) {
  alert("event click");
}


document.getElementById("mybtn").addEventListener("click",myfunction);



document.getElementById("mybtn2").addEventListener("click",function(e){
   document.getElementById("mybtn").removeEventListener("click",myfunction);
});

<button id="mybtn">btn</button><br/>
<button id="mybtn2" >remove btn click</button>

Answer 2

OL3 会发出您可以使用的自己的事件类型，并且为了回答您最初的问题，提供了一种简单快捷的方法来注销它们。

看这个例子：http://openlayers.org/en/v3.13.0/examples/vector-layer.html

更具体地说，在这些行：

  map.on('pointermove', function(evt) {
    if (evt.dragging) {
      return;
    }
    var pixel = map.getEventPixel(evt.originalEvent);
    displayFeatureInfo(pixel);
  });

  map.on('click', function(evt) {
    displayFeatureInfo(evt.pixel);
  });

ol.Map 对象有一个 on 方法，您可以使用该方法在 ol3 地图浏览器事件上注册事件侦听器。最好使用这些事件而不是标准的浏览器事件。在此处查看所有地图浏览器事件的列表：http://openlayers.org/en/v3.13.0/apidoc/ol.MapBrowserEvent.html

要注销，您可以：

a) 使用 un 方法，但确保你给 相同的回调方法 作为第二个参数。换句话说：

  var callback = function(evt) {
    displayFeatureInfo(evt.pixel);
  };
  map.on('click', callback);
  map.un('click', callback);

b) 另一种方法是使用 ol.Observable.unByKey 方法，我很喜欢这种方法。当调用 on 或 once 时， 它 returns 引用事件的键 。然后您可以使用该键取消收听您的活动：

  var key = map.on('click', function(evt) {
    displayFeatureInfo(evt.pixel);
  });
  ol.Observable.unByKey(key);

我发现 b) 更友好，因为您可以注册一堆事件侦听器并将所有键放在一个数组中。当你想全部取消注册时，在数组中循环调用unByKey方法，然后清空数组。与必须手动取消注册所有事件相比，它生成的代码更少。

如何在 OpenLayers 3 中删除监听器

How to delete a listener in OpenLayers 3

javascript

openlayers-3