How to delete a listener in OpenLayers 3

Question

I make a copy of my question here at stackoverflow, because at gis.stackexchange all my questions do not attract any attention - many times I could not get an answer to simple questions there. So, my question now is how to delete a listener defined this way:

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

Marabelle

if you use getViewport() it will return a HTMLElement which has nothing to do with openlayers. See developer.mozilla.org/en-US/docs/Web/API/HTMLElement – Cholera

openlayers listener adding and removing is described at openlayers.org/en/master/apidoc/ol.Object.html, btw. – Cholera

If you want to register a click on the map to, let's say, know the coordinate clicked, then you definitively should use the ol3 native map browser events as the event object would contain that information. – Dislocation

@Alexandre Dubé. Thanks! Now I'm using map.on – Marabelle

Can you go back and accept @Alexandre Dubé answer, as it seems to be the most helpful. – Simonette

Answer 1

OL3 emmits its own kind of events you could use instead and, to answer your original question, gives an easy and quick way to unregister them.

Look at this example: http://openlayers.org/en/v3.13.0/examples/vector-layer.html

More specifically, at these lines:

  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);
  });

The ol.Map object has a on method you can use to register event listeners on the ol3 map browser events. It's best to use those events instead of standard browser events. See the list of all map browser events here: http://openlayers.org/en/v3.13.0/apidoc/ol.MapBrowserEvent.html

To unregister, you can:

a) use the un method, but make sure you to give the same callback method as 2nd argument. In other words:

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

b) an other way is to use the ol.Observable.unByKey method, which I like a lot. When calling on or once, it returns a key that references the event. You can then use that key to unlisten your event:

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

I find b) to be more friendly as you can register a bunch of event listeners and put all the keys inside an array. When you want to unregister them all, loop in the array and call the unByKey method, then empty the array. It generates less code that way than having to unregister all events manually.

Cesura

Answer 2

to remove first thing to do is to declare an external function attached to the click and then remove it with removeEventListener

like this

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

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

and then remove it by

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

that's all

Here is a snippet

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>

Sleek