Disabling the context menu on long taps on Android

Javascript Problem Overview

I would like to disable the context menu that appears after a long tap (touch and hold) on images in my web application. I've seen posts with different ideas how to do it, but none of them seem to work for me.

Is there a way to do this on Android via HTML/CSS/Javascript?

Javascript Solutions

Solution 1 - Javascript

The context menu has its own event. You just need to catch it and stop it from propagating.

window.oncontextmenu = function(event) {
	 event.preventDefault();
	 event.stopPropagation();
	 return false;
};

Solution 2 - Javascript

This should work on 1.6 or later (if I recall correctly). I don't believe there's a workaround for 1.5 or earlier.

<!DOCTYPE html>
<html>
<head>
  <script>
    function absorbEvent_(event) {
      var e = event || window.event;
      e.preventDefault && e.preventDefault();
      e.stopPropagation && e.stopPropagation();
      e.cancelBubble = true;
      e.returnValue = false;
      return false;
    }

    function preventLongPressMenu(node) {
      node.ontouchstart = absorbEvent_;
      node.ontouchmove = absorbEvent_;
      node.ontouchend = absorbEvent_;
      node.ontouchcancel = absorbEvent_;
    }

    function init() {
      preventLongPressMenu(document.getElementById('theimage'));
    }
  </script>
</head>
<body onload="init()">
  <img id="theimage" src="http://www.google.com/logos/arthurboyd2010-hp.jpg" width="400">
</body>
</html>

Solution 3 - Javascript

For me, absorbing all the events was not an option since I wanted to disable long press downloads while still allowing the user to zoom and pan on the image. I was able to solve this with css and html only by layering a "shield" div on top of the image like so:

<div class="img-container">
  <div class="shield"></div>
  <img src="path.jpg">
</div>

img {
    max-width: 100%;
}

.shield {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

Hope this helps someone!

Solution 4 - Javascript

That can be done using CSS:

img {
  pointer-events: none;
}

Solution 5 - Javascript

I use the complete example by Nurik but the the element (an input image in my page) was disable for the click too.

I change the original line by this:

original line:

node.ontouchstart = absorbEvent_;

my change:

node.ontouchstart = node.onclick;

with this approuch i disable the pop-up save image menu on logpress but keep the click event.

I´m testing on a 7" tablet with Android 2.2 under a Dolphin HD browser and works fine!

Solution 6 - Javascript

It will disable copy, but do not disable selection.

document.oncontextmenu = function() {return false;};

Works in webView.

Solution 7 - Javascript

Use this CSS codes for mobile

-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */

Solution 8 - Javascript

pointer-events: none; // for Android

-webkit-touch-callout: none; // for iOS

-webkit-user-select: none; 

-khtml-user-select: none; 

-moz-user-select: none; 

-ms-user-select: none; 

user-select: none;

Solution 9 - Javascript

I've had a similar issue. I've tried couple of solution from this thread and another thread for safari on the same problem (https://stackoverflow.com/questions/12304012/preventing-default-context-menu-on-longpress-longclick-in-mobile-safari-ipad) . The bad part was that I couldn't use onTouchStart,onTouchEnd etc...

Only prevent the event from onContextMenu. Snippet from React 16.5.2. Tested in chrome only.

    <img {...props} onContextMenu={event => event.preventDefault()}
    onTouchStart={touchStart}
    onTouchEnd={touchEnd} />

Hope it helps somebody. Cheers!

Solution 10 - Javascript

<a id="moo" href=''> </a>

<script type="text/javascript">
    var moo = document.getElementById('moo');

    function handler(event) {
        event = event || context_menu.event;

        if (event.stopPropagation)
            event.stopPropagation();

        event.cancelBubble = true;
        return false;
    }

    moo.innerHTML = 'right-click here';

    moo.onclick = handler;
    moo.onmousedown = handler;
    moo.onmouseup = handler;
</script>

Capture the onContextMenu event, and return false in the event handler.

You can also capture the click event and check which mouse button fired the event with event.button, in some browsers anyway.

Solution 11 - Javascript

Just had a similar problem. The above suggestions did not work for me in the Andoid browser, but I found that displaying the problematic image as a CSS background image rather than an embedded image fixed the problem.

Solution 12 - Javascript

Through raw javascript there are no events that get called for the context menu. Perhaps in the Java world there is something... There are actually several issues regarding javascript events (such as focus not working right) in the Android webkit.

Content Type	Original Author	Original Content on Stackoverflow
Question	Roy Sharon	View Question on Stackoverflow
Solution 1 - Javascript	bbsimonbb	View Answer on Stackoverflow
Solution 2 - Javascript	Roman Nurik	View Answer on Stackoverflow
Solution 3 - Javascript	Brian FitzGerald	View Answer on Stackoverflow
Solution 4 - Javascript	Artem Andreev	View Answer on Stackoverflow
Solution 5 - Javascript	GAL	View Answer on Stackoverflow
Solution 6 - Javascript	devasia2112	View Answer on Stackoverflow
Solution 7 - Javascript	vitralyoz	View Answer on Stackoverflow
Solution 8 - Javascript	soonsuweb	View Answer on Stackoverflow
Solution 9 - Javascript	Vlad Ilie	View Answer on Stackoverflow
Solution 10 - Javascript	Hare-Krishna	View Answer on Stackoverflow
Solution 11 - Javascript	RichardB	View Answer on Stackoverflow
Solution 12 - Javascript	Moncader	View Answer on Stackoverflow