在移动 Safari (iPad/iPhone) 中防止长按/长按的默认上下文菜单 [英] Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)

问题描述

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

For a website I want to show a custom context menu when a user "longpresses" the screen. I've created a jQuery Longclick listener in my code to show a custom context menu. The context menu is displayed, but the iPad's default context menu is also displayed! I tried to prevent this by adding a preventDefault() to the event in my listener, but this does not work:

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

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

So I assume this answers my second question (assuming the plugin used the correct event).

推荐答案

感谢 JDandChips 指出我的解决方案.它与 longclick 插件完美结合.为了文档起见，我将发布我自己的答案以展示我所做的.

Thanks to JDandChips for pointing me to the solution. It works perfectly in combination with the longclick plugin. For documentation sake I'll post my own answer to show what I did.

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 已经可以了:

The Javascript already was OK:

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

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

解决方法是将这些规则添加到样式表中:

The fix was to add these rules to the style sheet:

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

禁用上下文菜单示例.

这篇关于在移动 Safari (iPad/iPhone) 中防止长按/长按的默认上下文菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！