禁用移动IE上的callout(上下文菜单）

Disable callout (context menu) on mobile IE

本文关键字：上下文 菜单 callout 上的 移动 IE      更新时间：2024-02-03

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

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

W3邮件列表中的这篇文章建议在Javascript中为"contextenu"事件添加一个监听器，并调用e.preventDefault()。这似乎也不起作用。

有什么建议吗？

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

  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示例。

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

  3. user-select: none

  4. -ms-touch-action
  5. -webkit-touch-callout: none
  6. 我甚至打电话给IE团队的某个人，他不知道该怎么办

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

  • CSS属性：适用于IE的webkit touch callout等效项
  • 微软建议的preventDefault方法：https://msdn.microsoft.com/en-US/en-en/library/jj583807（v=vs.85）.aspx
  • 捕捉所有触摸事件：在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;
}
相关文章：