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

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.


Update: the jQuery Longclick plugin seems to work only in Safari on the iPad, not in Google Chrome! I'm looking into that at the moment.


Update 2: I've embedded the Longclick Javascript in the source of the Fiddle because I was getting the following error in Chrome (due to https):

Refused to execute script from 'https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

See the updated version: http://jsfiddle.net/z9ZNU/53/


<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 */
}

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.