Avoid context menu for long tap when editing on mobile

examples/draw-and-modify-features.js

@@ -71,9 +71,4 @@ typeSelect.onchange = function() {
   addInteractions();
 };
 
-// Avoid context menu for long taps when editing on mobile
-map.getTargetElement().oncontextmenu = function(e) {
-  e.preventDefault();
-};
-
 addInteractions();

src/ol/PluggableMap.js

@@ -267,6 +267,8 @@ const PluggableMap = function(options) {
    */
   this.keyHandlerKeys_ = null;
 
+  _ol_events_.listen(this.viewport_, EventType.CONTEXTMENU,
+    this.handleBrowserEvent, this);
   _ol_events_.listen(this.viewport_, EventType.WHEEL,
     this.handleBrowserEvent, this);
   _ol_events_.listen(this.viewport_, EventType.MOUSEWHEEL,
@@ -491,6 +493,8 @@ PluggableMap.prototype.addOverlayInternal_ = function(overlay) {
  */
 PluggableMap.prototype.disposeInternal = function() {
   this.mapBrowserEventHandler_.dispose();
+  _ol_events_.unlisten(this.viewport_, EventType.CONTEXTMENU,
+    this.handleBrowserEvent, this);
   _ol_events_.unlisten(this.viewport_, EventType.WHEEL,
     this.handleBrowserEvent, this);
   _ol_events_.unlisten(this.viewport_, EventType.MOUSEWHEEL,

src/ol/events/EventType.js

@@ -15,6 +15,7 @@ export default {
   CHANGE: 'change',
 
   CLEAR: 'clear',
+  CONTEXTMENU: 'contextmenu',
   CLICK: 'click',
   DBLCLICK: 'dblclick',
   DRAGENTER: 'dragenter',

src/ol/interaction/Draw.js

@@ -2,6 +2,7 @@
  * @module ol/interaction/Draw
  */
 import {inherits} from '../index.js';
+import EventType from '../events/EventType.js';
 import Feature from '../Feature.js';
 import MapBrowserEventType from '../MapBrowserEventType.js';
 import MapBrowserPointerEvent from '../MapBrowserPointerEvent.js';
@@ -336,6 +337,10 @@ Draw.prototype.setMap = function(map) {
  * @api
  */
 Draw.handleEvent = function(event) {
+  if (event.originalEvent.type === EventType.CONTEXTMENU) {
+    // Avoid context menu for long taps when drawing on mobile
+    event.preventDefault();
+  }
   this.freehand_ = this.mode_ !== Draw.Mode_.POINT && this.freehandCondition_(event);
   let move = event.type === MapBrowserEventType.POINTERMOVE;
   let pass = true;