javascript - 防止在移动 Safari (iPad/iPhone) 中长按/长按时出现默认上下文菜单

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 有一些特定的处理(假设 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)
}

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

Answer 1

感谢 JDandChips pointing我的解决方案。它与 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; }

Disabled context menu example .