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

IT技术 javascript jquery iphone ipad mobile-safari
2021-03-14 08:01:30

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

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

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

6个回答

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

禁用上下文菜单示例

这只是长点击锚点的解决方案。如果您有输入区域、文本区域或其他形式的内容编辑器,这并不能解决出现默认上下文菜单的问题。
2021-04-18 08:01:30
这个解决方案接近于执行我试图完成的任务。允许选择文本但显示自定义菜单,允许对该文本执行操作(从而禁用 iOS 标注菜单)。这里有人知道我该怎么做吗?如果您对我如何做到这一点的可能解决方案有任何想法,请在此处提供问题的答案提前致谢!
2021-04-26 08:01:30
要修复您的小提琴,从 github 关闭 cdn.rawgit.com 或 rawgit.com(取决于生产/开发)的参考文件 - rawgit.com
2021-04-28 08:01:30
@RGA 问题是由使用https. 我已经解决了这个问题。
2021-05-03 08:01:30
它在 jsfiddle.net 上工作但不在本地页面上工作 为什么?
2021-05-08 08:01:30
<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 */
}
这适用于 iphone ios9。我父亲经常长按一个列表视图项,这个 css 禁用了弹出窗口。
2021-04-27 08:01:30
我强烈建议不要使用星号选择器,甚至会在这种情况下将其标记为反模式。全面关闭浏览器的基本功能可能会导致您日后出现问题。这种斧头换手术刀类型的方法使项目走下坡路。但是,选项二是可以接受的,只要您在有针对性的场景中进行。那只是我的 2 美分。
2021-05-04 08:01:30
在移动网站上将其全局应用于所有链接是一种不好的做法。
2021-05-05 08:01:30

一个快速的 css 解决方案:

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

用户选择禁用突出显示文本/区域。
触摸标注禁用上下文菜单弹出。

为什么不html { display: none !important; }呢?
2021-04-20 08:01:30
我希望用户仍然选择,但我不希望弹出上下文菜单......当我删除 -webkit-user-select: none; 时,它仍然为我显示上下文菜单:(
2021-05-10 08:01:30

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

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

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

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

.className{-webkit-touch-callout: none !important; 
-webkit-user-select: none !important; }
你救了我的一天。
2021-04-23 08:01:30

我没有 iPad,因此无法测试解决方案,但我确实遇到了类似的问题,已解决。我不知道它是否对您有帮助,但这里是链接:如何在 jQuery Mobile (iOS) 中禁用 Anchor 的默认行为