Prevent map click event being fired when select interaction is fired in OpenLayers7.3?

Question

Code to listen on map click:

map.on('click', function (evt) {
    console.log('=============');
});

Code on select interaction:

const selectClick = new Select({
    condition: click,
});
map.addInteraction(selectClick);
selectClick.on('select', function (e) {
    console.log('-----------------');
});

The problem here is, when I click a feature on map, both click event and select event are fired.

----------------- and ============= are printed.

How to stop click event when a select event is fired?

Answer 1

One possible solution for this would be to define/create another interaction on pointerMove condition which then sets ignoreClick variable to true when mouse is over a feature, thus disabling click processing.

Relevant part of the code could then look something like this:

var ignoreClick = false;

map.on('click', function (evt) {
  if (ignoreClick) return;
  console.log('=============');
});


const selectClick = new Select({
  condition: click
});
map.addInteraction(selectClick);
selectClick.on('select', function (evt) {
  console.log('-----------------');
});

const hoverDetect = new ol.interaction.Select({
  condition: pointerMove,
  style: null
});
map.addInteraction(hoverDetect);
hoverDetect.on('select', function (evt) {
  ignoreClick = (evt.selected.length > 0);
});