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

Question

在网络应用程序中，我需要禁用移动浏览器在触摸并按住 ("long tap") 触摸目标（例如 <img> 或 [=30] 时显示的默认标注=].

我已经在为 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

我尝试了所有 "normal" 或 "elegant" 选项，但显然 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;
}

Answer 2

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

使用透明<div>覆盖link/image
使用 <div> 和 style="background: url(yourimage.png)" 而不是 <img src="yourimage.png">

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

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

事件：我尝试注册每个事件并使用 e.preventDefault()、e.stopPropagation() 和 return false 来阻止所有默认操作。 JSBin example.
使用 element:before 或 element:after 将元素放置在 link 或图像之上。我认为这可能能够自动执行透明 <div> 所做的事情。不幸的是，:before 或 :after 内容是 <a> 的一部分，因此它们也都是可点击的。另外，显然 <img> 元素不支持 :before 或 :after。 JSBin example.
user-select: none
-ms-touch-action
-webkit-touch-callout: none
我什至 ping 了 IE 团队的某个人，他不知道有什么办法。

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

Disable callout (context menu) on mobile IE

html

javascript

css

internet-explorer

web-applications