Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)

Question

For a website I want to show a custom context menu when a user "longpresses" the screen. I've created a jQuery Longclick listener in my code to show a custom context menu. The context menu is displayed, but the iPad's default context menu is also displayed! I tried to prevent this by adding a preventDefault() to the event in my listener, but this does not work:

function showContextMenu(e){
  e.preventDefault();
  // code to show custom context menu
}

$("#myId").click(500, showContextMenu);

Questions

1. Can you prevent the iPad's default context menu to show?
2. Can it by done using the jQuery Longclick plugin?

---

The Longclick plugin has some specific handling for the iPad (assuming by this snippet of it's source code):

if (!(/iphone|ipad|ipod/i).test(navigator.userAgent)){
  $(this)
  .bind(_mousedown_, schedule)
  .bind([_mousemove_, _mouseup_, _mouseout_, _contextmenu_].join(' '), annul)
  .bind(_click_, click)
}

So I assume this answers my second question (assuming the plugin used the correct event).

Solution 1

Thanks to JDandChips for pointing me to the solution. It works perfectly in combination with the longclick plugin. For documentation sake I'll post my own answer to show what I did.

HTML:

<script type="text/javascript"
        src="https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js"></script>

<p><a href="http://www.google.com/">Longclick me!</a></p>

The Javascript already was OK:

function longClickHandler(e){
  e.preventDefault();
  $("body").append("<p>You longclicked. Nice!</p>");
}

$("p a").longclick(250, longClickHandler);

The fix was to add these rules to the style sheet:

body { -webkit-touch-callout: none !important; }
a { -webkit-user-select: none !important; }

Disabled context menu example.

Solution 2

<style type="text/css">
*:not(input):not(textarea) {
  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}       
</style>

If you want disable only anchor button tag use this:

a {
  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}

Solution 3

A quick css solution:

html {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

user-select disables highlighting text/areas.
touch-callout disables context menu popup.

Solution 4

No need to use JavaScript, It can be performed using css.

For disabling context menu only for images, Use

img{
-webkit-touch-callout: none !important; 
 -webkit-user-select: none !important; }

If we need to disable context menu for particular classes, Use

.className{-webkit-touch-callout: none !important; 
-webkit-user-select: none !important; }

Solution 5

I don't have an iPad so couldn't test a solution, but I did come across a similar question, which was resolved. I don't know if it will be of any help to you, but here is the link: How to disable the default behavior of an Anchor in jQuery Mobile (iOS)

View more solutions

Comments

[RGA]

its working on jsfiddle.net but not working on local page Why?

[Satyam]

i want the user to still select, but i dont want the context menu to popup.... when i removed -webkit-user-select: none;, it still shows the context menu for me :(

[Jason]

This is only a solution for longclick on anchors. If you have an input area, text area or some other form of content editor this does not solve the problem of the default context menu appearing.

[Jasper de Vries]

@RGA the problem was caused by referencing Javascript using https. I've fixed this.

[pronebird]

Applying this globally to all links is a bad practice on mobile websites.

[pronebird]

Why not html { display: none !important; } ?

[1800 INFORMATION]

To fix your fiddle, reference files from github off of cdn.rawgit.com or rawgit.com (depending on production/dev) - rawgit.com

[JayGee]

This solution comes close to performing a task which I am trying to accomplish. Allowing text selection but displaying a custom menu that allows actions to be performed on that text (thus disabling the iOS callout menu). Anyone here know how I can do that? If you have any ideas for a possible solution on how I can do that, please offer an answer to the question here. Thanks in advance!

[A.W.]

This works on iphone ios9. My father often longclicks on a listview item and this css disables the popup.

[dudewad]

I highly recommend against the star selector and would even label it an anti-pattern in this context. Shutting off a basic browser feature across the board will likely cause you problems down the road. This hatchet-for-a-scalpel type approach is what makes projects go downhill. Option two, however, is acceptable, as long as you do it in targeted scenarios. That's just my 2 cents.

[lsmpascal]

You saved my day.