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

Question

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

我已经在使用 -webkit-touch-callout: none适用于 iPhone 和 iPad。我试过 -ms-touch-action:none和 touch-action:none对于 IE，但这似乎不起作用(在 IE11、Windows Phone 8 上测试)。

This post来自 W3 邮件列表的建议在 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. 我什至联系了 IE 团队的某个人，但他不知道有什么办法。