1

How can I disable map click event? My idea is to disable it when I am positioned with mouse over my popup container. After I move mouse out of it, I want that event is enabled again. Something like this:

container=document.getElementById('popup')
container.addEventListener('mouseover',function(){
                 //disable map click event
}

container.addEventListener('mouseout,function(){
                 //enable it again
}

Is this possible?

  • I usually use Leaflet, but here is some quick research. You can use getInteractions() on your map, find out the click event and then setActive(boolean) that interaction. – Stefan Nov 20 '18 at 13:22
  • OpenLayers should do that automatically if you use an overlay to display your popup. – Mike Nov 20 '18 at 13:57
  • @Mike Yeah i know, but I am trying to present ext js tab panel inside popup and when i click on my tabs while overlay property stopEvent is set to true , tabs are not responding. When I change property to false and then click on tabs functionality is working, but its like I can click trough on map also and new popout comes in place where I clicked on tab. I Tried now with ol.interaction.Select instance to setActive(false) under the condition that I am hovering over the popup container but it didn't help. I am out of ideas. I can put link here on different variation of problem – Goran Nov 20 '18 at 14:06
  • How are you making your tabs? Bootstrap tabs or something else..? – rbkb Nov 20 '18 at 15:03
  • @rbkb ext.js library – Goran Nov 20 '18 at 15:04
2

I had a similar issue with a search box (which for historical reasons wasn't a control, simply a div above the map). Mouse interactions on features were easy to disable and re-enable, but for map click events I resorted to setting and testing a mouseOver var.

var mouseOver = false;

searchBox.onmouseover = function() {
    map.getInteractions().forEach(function(interaction){interaction.setActive(false);});
    mouseOver = true;
};

searchBox.onmouseout = function() {
    map.getInteractions().forEach(function(interaction){interaction.setActive(true);});
    mouseOver = false;
};

map.on('singleclick', function(evt) {

    if (mouseOver) { return; }

    ...
    ...
    ...

};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.