Javascript 禁用移动IE上的标注（关联菜单）

在web应用程序中，我需要禁用移动浏览器在触摸和按住触摸目标（如

或链接）时显示的默认标注

我已经在为iPhone和iPad使用

-webkit touch callout:none

。我为IE尝试了

-ms touch action:none

和

touch action:none

，但这似乎不起作用（在IE11、Windows Phone 8上测试）

W3邮件列表建议在Javascript中为“contextmenu”事件添加一个侦听器，并调用

e.preventDefault（）

。这似乎也不起作用

有什么建议吗？

我尝试了所有“普通”或“优雅”选项，但显然IE11 mobile忽略了其中的每一个选项

• CSS属性：
• Microsoft建议的

  preventDefault

  方法：
• 捕捉所有触摸事件：
• homebrewn

  oncontextmenu

  回调，带有

  StopRopagation

  和

  preventDefault

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

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

---

我做了一系列研究，据我所知，这是你的两个选择：

使用透明的

覆盖链接/图像

使用带有

style=“background:url（yourmage.png）”的
而不是

核心问题是Windows Phone上的移动IE无法正确处理带有

contextmenu

事件的

preventDefault

。这是实现这一点的正确方法，它适用于其他所有浏览器。

contextmenu

事件是在WP IE上触发的，但它实际上是在长按上下文菜单被取消时发生的。它应该在显示菜单之前发生，这样你就可以防止它

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

事件：我尝试注册每个事件，并使用

e.preventDefault（）

，

e.stopPropagation（）

和

return false

来阻止所有默认操作

使用

element:before

或

element:after

将元素放置在链接或图像的顶部。我认为这可能会自动完成透明的

所做的事情。不幸的是，

：before

或

：after

内容是

的一部分

用户选择：无

-ms触摸动作

-webkit触摸标注：无

我甚至打了IE团队的一个人，他不知道怎么做

---

也许还可以尝试MSHoldVisual、MSPassential（）？如果preventDefault在img上不起作用，我唯一要做的就是尝试在图像上方放置一个div，并防止点击/触摸它。但你可能已经知道了，这是肮脏的代码，所以我不会真的建议你这么做。显然没有优雅的答案，对不起。我在Browserstack中测试了这些，并提供了我尝试的链接。这个答案和pseudsavant的答案都显示了一些很好的研究。我对两者都投了赞成票，但我最终还是接受了pseudosavant的答案，因为它还解释了为什么在contextmenu事件中调用preventDefault（）的“规范”方法不起作用。

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