[英]Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)
对于网站,我想在用户“长按”屏幕时显示自定义上下文菜单。 我在我的代码中创建了一个jQuery Longclick侦听器来显示自定义上下文菜单。 显示上下文菜单,但也会显示 iPad 的默认上下文菜单! 我试图通过向侦听器中的事件添加preventDefault()
来防止这种情况发生,但这不起作用:
function showContextMenu(e){
e.preventDefault();
// code to show custom context menu
}
$("#myId").click(500, showContextMenu);
问题
Longclick 插件对 iPad 有一些特定的处理(假设它的源代码片段):
if (!(/iphone|ipad|ipod/i).test(navigator.userAgent)){
$(this)
.bind(_mousedown_, schedule)
.bind([_mousemove_, _mouseup_, _mouseout_, _contextmenu_].join(' '), annul)
.bind(_click_, click)
}
所以我假设这回答了我的第二个问题(假设插件使用了正确的事件)。
感谢 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; }
<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 */
}
一个快速的 css 解决方案:
html {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
用户选择禁用突出显示文本/区域。
触摸标注禁用上下文菜单弹出。
不需要使用 JavaScript,它可以使用 css 执行。
要仅为图像禁用上下文菜单,请使用
img{
-webkit-touch-callout: none !important;
-webkit-user-select: none !important; }
如果我们需要禁用特定类的上下文菜单,请使用
.className{-webkit-touch-callout: none !important;
-webkit-user-select: none !important; }
我没有 iPad,因此无法测试解决方案,但我确实遇到了类似的问题,已解决。 我不知道它是否对您有帮助,但这里是链接: 如何在 jQuery Mobile (iOS) 中禁用 Anchor 的默认行为
无需依赖-webkit-
属性。
如果您的链接是 Javascript 调用,则就像完全删除href="void(0)"
一样简单! 您的ontouchend
或onclick
属性仍然有效。 如果您希望链接看起来是原始的,请添加以下 css:
a .originalLink { color: blue; text-decoration: underline; cursor: pointer; }
这将运行得更顺畅,尤其是当页面中有数百个链接时。
您还可以以 SEO 损失为代价将其扩展到“真实”页面链接:
<a class="originalLink" onclick="location.href='http://mylink';">Real URL Link</a>
对于大多数网站来说,这不是一个很好的做法,但对于特定的移动友好情况(移动网络应用程序),这可能是至关重要的。
快乐编码!
这个 github 存储库对我有用。 就我而言,我使用 UIWebView 编写了一个 iPad 应用程序。
我用过这个:
<p onclick="window.location.href='https://google.com‘“>Link</p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.