在移动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

我尝试了所有“正常”或“优雅”选项，但显然IE11 mobile忽略了每一个选项。

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

实际上唯一可行的是旧的丑陋的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;
}

Answer 2

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

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

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

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

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

2. 使用return false或element:before将元素放置在链接或图片的顶部。我认为这可能会自动执行透明element:after所做的事情。很遗憾，<div>或:before内容是:after的一部分，因此它也是可点击的。此外，显而易见的<a>元素不支持<img>或:before。 JSBin example

3. :after

4. user-select: none
5. -ms-touch-action
6. 我甚至在IE团队中找到了一个人，但他并不知道如何。