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

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

• javascript
• openlayers-3

• if you use getViewport() it will return a HTMLElement which has nothing to do with openlayers. See developer.mozilla/en-US/docs/Web/API/HTMLElement – Simon Zyx Commented Jan 26, 2016 at 14:23
• openlayers listener adding and removing is described at openlayers/en/master/apidoc/ol.Object.html, btw. – Simon Zyx Commented Jan 26, 2016 at 14:24
• 1 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. – Alexandre Dubé Commented Jan 26, 2016 at 15:33
• @Alexandre Dubé. Thanks! Now I'm using map.on – Jacobian Commented Jan 26, 2016 at 15:34
• Can you go back and accept @Alexandre Dubé answer, as it seems to be the most helpful. – mcneela86 Commented Feb 15, 2018 at 16:36

2 Answers 2

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/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/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.

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>