5

I am relatively new to web development, and am currently building an Ionic/angular2 hybrid mobile app. I have used the in browser devtools just fine until now.

When I am using the mobile device testing screen, the browser registers a right-click whenever I click/press and hold. It only happens when I click and hold within the device testing viewport, not outside of the device view.

Because of this I thought it might be an issue in the app code, but the right-click menu that appears is the one from my computer, not what would be a secondary tap on a mobile device. It happens in both the updated firefox and chrome devtools, and I cannot find any setting for it. I have a macbook pro and have adjusted all of my trackpad/mouse settings to no avail.

This is greatly hindering my testing as I have a press and hold feature in my app, yet I cannot test it because when the right click is registered, my app screen fails to record a mouseup event.

This is my first question asked on here so go easy please haha, and thanks for the help!

1pocketaces1
  • 137
  • 1
  • 11

1 Answers1

1

This is due to a "feature" in Chrome that emulates a context menu (right-click) when the touch cursor is held down. This is because on most Android/iOS devices a tap-and-hold will bring up a copy/paste menu.

To disable this behavior, just add this to your web app:

window.addEventListener('contextmenu', function(e) {
  e.preventDefault();
}, true);

This kills the context menu before it appears.

Luc
  • 3,581
  • 3
  • 22
  • 24