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

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.


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