Disabling the context menu on long taps on Android

The question:

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?

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

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

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

Method 2

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>
    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() {
<body onload="init()">
  <img id="theimage" src="https://www.google.com/logos/arthurboyd2010-hp.jpg" width="400">

Method 3

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">

img {
    max-width: 100%;

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

Hope this helps someone!

Method 4

That can be done using CSS:

img {
  pointer-events: none;

Method 5

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!

Method 6

It will disable copy, but do not disable selection.

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

Works in webView.

Method 7

Use this CSS codes for mobile

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

Method 8

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;

Method 9

I’ve had a similar issue. I’ve tried couple of solution from this thread and another thread for safari on the same problem (Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)) . 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()}
    onTouchEnd={touchEnd} />

Hope it helps somebody. Cheers!

Method 10

<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.cancelBubble = true;
        return false;

    moo.innerHTML = 'right-click here';

    moo.onclick = handler;
    moo.onmousedown = handler;
    moo.onmouseup = handler;

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.

Method 11

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.

Method 12

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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment