在移动IE上禁用标注(上下文菜单)

Question

在Web应用程序中,我需要禁用移动浏览器在触摸目标(例如<img>或链接)上触摸并按住("长按")时显示的默认标注.

我已经在使用-webkit-touch-callout: noneiPhone和iPad了.我试过-ms-touch-action:none和touch-action:noneIE,但这似乎不起作用(在IE11,Windows Phone 8上测试).

来自W3邮件列表的这篇文章建议在Javascript和调用中为"contextmenu"事件添加一个监听器e.preventDefault().这似乎也不起作用.

有什么建议？

Answer 1

我做了很多研究，据我所知，这是你的两个选择：

1. 使用透明胶片<div>覆盖链接/图像
2. 使用<div>withstyle="background: url(yourimage.png)"代替<img src="yourimage.png">

核心问题是 Windows Phone 上的移动 IE 无法正确处理preventDefault事件contextmenu。这是执行此操作的正确方法，并且它适用于所有其他浏览器。该contextmenu事件在 WP IE 上触发，但实际上是在长按上下文菜单被解除时发生的。它应该在显示菜单之前发生，这样你就可以阻止它。

以下是我尝试过的一些其他选项：

1. 事件：我尝试注册每个事件并使用e.preventDefault(),e.stopPropagation()和return false来阻止所有默认操作。JSBin 示例。

2. 使用element:before或element:after将元素放置在链接或图像的顶部。我认为这可能能够自动执行透明的操作<div>。不幸的是:before或:after内容是 的一部分，<a>所以它也都是可点击的。此外，显然<img>元素不支持:before或:after。JSBin 示例。

3. user-select: none

4. -ms-touch-action
5. -webkit-touch-callout: none
6. 我什至联系了 IE 团队的某个人，他也不知道怎么办。