在移动 IE 上禁用标注（上下文菜单）

Question

在网络应用程序中，我需要禁用移动浏览器在触摸并按住（“长按”）触摸目标（例如 <img> 或链接）时显示的默认标注。

我已经在 iPhone 和 iPad 上使用-webkit-touch-callout: none。我为 IE 尝试了 -ms-touch-action:none 和 touch-action:none，但这似乎不起作用（在 IE11、Windows Phone 8 上测试）。

W3 邮件列表中的This post 建议在Javascript 中为“contextmenu”事件添加一个监听器并调用e.preventDefault()。这似乎也不起作用。

有什么建议吗？

Answer 1

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

1. 使用透明的<div> 覆盖链接/图片
2. 使用<div> 和style="background: url(yourimage.png)" 而不是<img src="yourimage.png">

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

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

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

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

3. user-select: none

4. -ms-touch-action
5. -webkit-touch-callout: none
6. 我什至 ping 过 IE 团队的某个人，但他不知道有什么办法。

Answer 2

我尝试了所有“正常”或“优雅”选项，但显然 IE11 移动版忽略了其中的每一个。

• CSS 属性：-webkit-touch-callout equivalent for IE
• 微软建议的preventDefault 方法：https://msdn.microsoft.com/en-US/en-en/library/jj583807(v=vs.85).aspx
• 捕获所有触摸事件：Disabling the context menu on long taps on Android
• 带有stopPropagation 和preventDefault 的自制oncontextmenu 回调

唯一真正起作用的是旧的丑陋的 div-over-image：

<div class="img-container">
  <img src="path/to/image.jpeg" />
  <div class="cover"></div>
</div>

CSS：

.img-container {
  position: relative;
}
.cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}