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

问题

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

Can you prevent the iPad's default context menu to show?
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).

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

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/

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

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

回答4:

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)

回答5:

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!

回答6:

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

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

回答7:

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

来源：https://stackoverflow.com/questions/12304012/preventing-default-context-menu-on-longpress-longclick-in-mobile-safari-ipad

标签

javascript

jquery

iphone

ipad

mobile-safari