Disable mobile longpress context menu on specific elements

Question

I have an image gallery with various controls. One of the controls is a basic delete function, to delete you click and hold for approx 1 second to get a confirmation asking if you want to delete. All works fine, it's just that on mobile devices it often causes the "Save Image As, etc" menu to pop up which has to be closed before the intended action can be performed.

I've read about various fixes but none of them seem to work with current versions of Chrome mobile on my Galaxy S5, and the most recent answer I could find was from 2013.

I found one saying that the context menu was it's own function, so I tried something like this:

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

But it did not prevent the context menu from showing on my S5. As I said, I'm hoping to find a solution to prevent it from coming up on certain items, not the entire window.

Thanks to Tasos for the answer

document.getElementById('yourElement').oncontextmenu = function(event) {
    event.preventDefault();
    event.stopPropagation(); // not necessary in my case, could leave in case stopImmediateProp isn't available? 
    event.stopImmediatePropagation();
    return false;
};

Have you added this CSS -webkit-user-select: none; to disable text selection on long press. I think you are not facing this problem — rajesh, Apr 16 '16 at 18:52
theres also (event.stopImmediatePropagation();) -- try putting that underneath (event.stopPropagation();) -- otherwise check here http://stackoverflow.com/questions/12304012/preventing-default-context-menu-on-longpress-longclick-in-mobile-safari-ipad — Tasos, Apr 16 '16 at 18:53
The CSS property does not work either. Tasos, please post an answer with your stopImmediateProp solution because it worked and I would like to give you credit. Will be updating the original question as well. Thanks! — SISYN, Apr 16 '16 at 22:10

score 5 · Answer 1 · answered Jun 07 '20 at 11:05

I (re)post the answer here because at first, I haven't seen it was in the question :)

So juste use this code, with stopImmediatePropagation :

document.getElementById('yourElement').oncontextmenu = function(event) {
    event.preventDefault();
    event.stopPropagation(); // not necessary in my case, could leave in case stopImmediateProp isn't available? 
    event.stopImmediatePropagation();
    return false;
};

Disable mobile longpress context menu on specific elements

1 Answers1