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


Disable callout (context menu) on mobile IE

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

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

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

有什么建议吗？

相关讨论

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

  • 使用透明的覆盖链接/图像
  • 将与style="background: url(yourimage.png)"而不是<img src="yourimage.png">一起使用

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

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

  • 事件：我尝试注册每个事件，并使用e.preventDefault()，e.stopPropagation()和return false阻止所有默认操作。 JSBin示例。

  • 使用element:before或element:after将元素放置在链接或图像的顶部。我认为这可能能够自动执行透明的操作。不幸的是，:before或:after内容是的一部分，因此也都可以单击。另外，<img>元素显然不支持:before或:after。 JSBin示例。

  • user-select: none

  • -ms-touch-action
  • -webkit-touch-callout: none
  • 我什至在IE团队中对某人执行ping操作，但他不知道有什么办法。

    • 我尝试了其中的每个"正常"或"优雅"选项，但显然IE11移动版忽略了其中的每一个。

    • CSS属性：等效于IE的-webkit-touch-callout
    • Microsoft建议的preventDefault方法：https://msdn.microsoft.com/zh-CN/en-en/library/jj583807(v=vs.85).aspx
    • 捕获所有触摸事件：在Android设备上长按即可禁用上下文菜单
    • 带有stopPropagation和preventDefault的Homebrewn oncontextmenu回调

    唯一有效的方法是旧的难看的div-over-image：

    1
      <img src="path/to/image.jpeg" />

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .img-container {
      position: relative;
    }
    .cover {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    相关讨论