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

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

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

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

Answer 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; }

Answer 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)

Answer 6

There's no need to rely on -webkit- properties.

If your link is a Javascript call, it's as easy as removing the href="void(0)" completely! Your ontouchend or onclick attributes will still work. If you want the link to look original, add this css:

a .originalLink { color: blue; text-decoration: underline; cursor: pointer; }

This will run a lot smoother, especially when there are hundreds of links in the page.

You can also extend this to "real" page-links at the cost of SEO loss:

<a class="originalLink" onclick="location.href='http://mylink';">Real URL Link</a>

Not exactly good practice for most websites, but for a specific mobile-friendly situation (mobile web app) this can be crucial.

Happy coding!

Answer 7

This github repository work for me. In my case I write an iPad app using UIWebView.

https://github.com/vaidik/jquery-longpress

Answer 8

我用过这个：

<p onclick="window.location.href='https://google.com‘“>Link</p>