在移动Safari(iPad/iPhone)中防止longpress/longclick上的默认上下文菜单

Question

对于一个网站,我想在用户"长按"屏幕时显示自定义上下文菜单.我在代码中创建了一个jQuery Longclick监听器来显示自定义上下文菜单.将显示上下文菜单,但也会显示iPad的默认上下文菜单!我试图通过preventDefault()在我的监听器中添加一个事件来防止这种情况,但这不起作用:

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

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

问题

1. 你可以阻止iPad的默认上下文菜单显示吗？
2. 可以使用jQuery Longclick插件完成吗？

---

Longclick插件具有针对iPad的一些特定处理(假设通过它的源代码片段):

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

所以我假设这回答了我的第二个问题(假设插件使用了正确的事件).

Answer 1

感谢JDandChips 指出我的解决方案.它与longclick插件结合使用非常完美.为了便于记录,我会发布自己的答案来展示我的所作所为.

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>

Javascript已经可以了:

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

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

修复是将这些规则添加到样式表:

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

禁用上下文菜单示例.

更新:jQuery Longclick插件似乎只适用于iPad上的Safari,而不适用于Google Chrome!我正在调查此刻.

更新2:我已将Longclick Javascript嵌入到Fiddle的源代码中,因为我在Chrome中遇到以下错误(由于https):

拒绝从' https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js ' 执行脚本,因为它的MIME类型('text/plain')不可执行,并且严格的MIME类型检查已启用.

查看更新版本:http://jsfiddle.net/z9ZNU/53/

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>

如果你想只禁用锚点按钮标签使用这个:

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

一个快速的CSS解决方案:

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

用户选择禁用突出显示文本/区域.
touch-callout禁用上下文菜单弹出窗口.

Answer 4

无需使用 JavaScript，使用 css 即可。

要仅为图像禁用上下文菜单，请使用

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

如果我们需要禁用特定类的上下文菜单，请使用

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