2

I am trying to open an ol-contextmenu programmatically on a mobile iOS device when a long-press is detected.

The contextmenu usually opens on right click. On Android it works for long-press as well. According to this answer, on iOS, touch events are not handled as mouse event types, which only seem to be handled by the ol-contextmenu library.

In the library's issues, it is suggested to trigger the menu programmatically. Unfortunately, I am not able to figure out, how to achieve this. Usually, the event seems to be handled inside the libray and there is no such function as contextmenu.open(), which I would be able to call.

Right now, I do this:

var map = new ol.Map({
  // ....
});

var contextmenu = new ContextMenu({
  width: 180,
  defaultItems: true
});
map.addControl(contextmenu);

contextmenu.on('open', function (evt) {
    // do something
}

I have added a touch handler, but I can't make the contextmenu open programmatically.

 $('.map')
  .on("touchstart", function(event){
      // Prevent default behavior
      event.preventDefault();
     
      // Timer for long touch detection
      timerLongTouch = setTimeout(function() {
          // Flag for preventing "normal touch event" trigger when touch ends. 
          longTouch = true;

          // I have tried different triggers, but without success so far
          // $('.map').dispatchEvent(new CustomEvent('contextmenu'));
          // $('.map').trigger('contextmenu');
          // $('.map').triggerHandler('contextmenu');
          // contextmenu.trigger("open");
          // contextmenu.triggerHandler("open");
 
      }, 1000);
  });

Any ideas, if this is possible and how to achieve it?

ulrich
  • 1,431
  • 3
  • 17
  • 46

0 Answers0