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

Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)

提问by Jasper de Vries

For a website I want to show a custom context menu when a user "longpresses" the screen. I've created a jQuery Longclicklistener 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:

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

function showContextMenu(e){
  e.preventDefault();
  // code to show custom context menu
}

$("#myId").click(500, showContextMenu);

Questions

问题

1. Can you prevent the iPad's default context menu to show?
2. Can it by done using the jQuery Longclick plugin?

1. 你能阻止 iPad 的默认上下文菜单显示吗？
2. 可以通过使用 jQuery Longclick 插件来完成吗？

---

---

The Longclick plugin has some specific handling for the iPad (assuming by this snippet of it's source code):

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

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

采纳答案by Jasper de Vries

Thanks to JDandChips for pointingme 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.

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

HTML:

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>

The Javascript already was OK:

Javascript 已经可以了：

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

Disabled context menu example.

禁用上下文菜单示例。

---

---

Update: the jQuery Longclickplugin seems to work only in Safari on the iPad, not in Google Chrome! I'm looking into that at the moment.

更新：jQuery Longclick插件似乎只能在 iPad 上的 Safari 中工作，而不能在 Google Chrome 中使用！我现在正在研究这个。

---

---

Update 2: I've embedded the Longclick Javascript in the source of the Fiddle because I was getting the following error in Chrome (due to https):

更新 2：我在 Fiddle 的源代码中嵌入了 Longclick Javascript，因为我在 Chrome 中遇到以下错误（由于https）：

Refused to execute script from 'https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

拒绝执行来自 ' https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js' 的脚本，因为它的 MIME 类型（'text/plain'）不可执行，并且严格的 MIME 类型检查已启用。

See the updated version: http://jsfiddle.net/z9ZNU/53/

查看更新版本：http: //jsfiddle.net/z9ZNU/53/

回答by Narsingh Tomar

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

If you want disable only anchor button tag use this:

如果您只想禁用锚按钮标签，请使用以下命令：

a {
  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}

回答by Federico

A quick css solution:

一个快速的 css 解决方案：

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

user-select disables highlighting text/areas.
touch-callout disables context menu popup.

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

回答by Pranav K

No need to use JavaScript, It can be performed using css.

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

For disabling context menu only for images, Use img{ -webkit-touch-callout: none !important; -webkit-user-select: none !important; }

要仅为图像禁用上下文菜单，请使用 img{ -webkit-touch-callout: none !important; -webkit-user-select: none !important; }

If we need to disable context menu for particular classes, Use .className{-webkit-touch-callout: none !important; -webkit-user-select: none !important; }

如果我们需要禁用特定类的上下文菜单，请使用 .className{-webkit-touch-callout: none !important; -webkit-user-select: none !important; }

回答by JDandChips

I don't have an iPad so couldn't test a solution, but I did come across a similar question, which was resolved. I don't know if it will be of any help to you, but here is the link: How to disable the default behavior of an Anchor in jQuery Mobile (iOS)

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

回答by Aaron Gillion

There's no need to rely on -webkit-properties.

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

If your link is a Javascript call, it's as easy as removing the href="void(0)"completely! Your ontouchendor onclickattributes will still work. If you want the link to look original, add this css:

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

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

This will run a lot smoother, especially when there are hundreds of links in the page.

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

You can also extend this to "real" page-links at the cost of SEO loss:

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

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

Not exactly good practice for most websites, but for a specificmobile-friendly situation (mobile web app) this can be crucial.

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

Happy coding!

快乐编码！

回答by Dody Rachmat Wicaksono

This github repository work for me. In my case I write an iPad app using UIWebView.

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

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

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