37

对于一个网站，我想在用户“长按”屏幕时显示自定义上下文菜单。我在代码中创建了一个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)
}

所以我假设这回答了我的第二个问题（假设插件使用了正确的事件）。

4

8 回答 8

31

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

禁用上下文菜单示例。

于 2012-09-18T07:42:09.350 回答
19 
<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 */
}
于 2014-10-28T14:31:01.030 回答
9

一个快速的CSS解决方案：

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

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

于 2013-08-11T19:33:49.263 回答
5

无需使用 JavaScript，可以使用 css 执行。

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

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

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

.className{-webkit-touch-callout: none !important; 
-webkit-user-select: none !important; }
于 2019-07-03T09:15:29.523 回答
3

我没有 iPad，因此无法测试解决方案，但我确实遇到了类似的问题，该问题已解决。我不知道它是否对你有任何帮助，但这里是链接：How to disable the default behavior of an Anchor in jQuery Mobile (iOS)

于 2012-09-14T12:53:05.457 回答
1

没有必要依赖-webkit-属性。

如果您的链接是一个 Javascript 调用，它就像href="void(0)"完全删除一样简单！您的ontouchendoronclick属性仍然有效。如果您希望链接看起来是原始的，请添加以下 css：

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

这将运行得更顺畅，尤其是当页面中有数百个链接时。

您还可以以损失 SEO 为代价将其扩展到“真实”页面链接：

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

对于大多数网站来说，这并不完全是好的做法，但对于特定的移动友好情况（移动网络应用程序）来说，这可能是至关重要的。

快乐编码！

于 2015-05-31T00:29:03.063 回答
0

这个 github 存储库对我有用。就我而言，我使用 UIWebView 编写了一个 iPad 应用程序。

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

于 2017-11-26T21:48:04.727 回答
0

我用这个：

<p onclick="window.location.href='https://google.com‘“&gt;Link</p>
于 2021-06-02T12:20:16.970 回答