在IE10-IE11的IE Touch上点击双击Bug（链接必须点击两次）

Question

我在IE11 Mobile（Lumia 520 Phone）上面在现有导航菜单上遇到了这个问题，其中我的子菜单中的每个链接都没有触发点击，在第一次点击。

This fiddle repro是部分弹出式无障碍导航菜单，取自样品WAI app menu。

如果您在IE10或IE11 Mobile或Touch上进行测试，您将会看到没有任何子菜单链接工作。

必须点击两次才能触发点击事件。

这是为什么？

Answer 1

此错误是从IE10-11开始为Touch部署的"help simulate hover on touch-enabled devices"功能的结果。

简而言之，导致和需要双击的原因是aria-haspopup=true作为子菜单父元素级别。正因为如此，IE Touch错误地认为所有这些链接都会自行切换并对待它们。我还会注意到，由于类似的原因，iOS Safari有自己的方式来对待elements with “:hover[s] that either hides or shows another element using visibility or display”。

由于在MSDN的Internet Explorer 10 Samples and Tutorials解释说：

另外，IE浏览器10增加了新的行为，以现有的咏叹调 - haspopup性能模拟与隐藏的交互式内容的页面元素悬停。

的问题是，虽然它理应设计是有帮助的，是实现是基于一种不完整，有些被误导读什么aria-haspopup是，什么是应该做的。

1. aria-haspopup从技术上来说属性（而不是状态）。这意味着IE将触摸行为放置在不会在运行时更改的元素上。除非回应的环境可能需要这样的改变;即使显示了弹出式元素，aria-haspopup='true'仍应保留为true。代替交换机的状态为aria-expanded。

2. 该概念仅适用于该教程中实现的aria-haspopup的MSDN example。即如果aria-haspopup=true置于切换按钮本身上，则该IE触摸功能将按预期工作。 但是如果aria-haspopup=true属性像我的repro一样放在父级别，或者像更传统的应用菜单一样，按照这个W3C/WAI example，这是一个问题。

去解决这个bug的解决方案是，要么不上，因为IE10-11触摸（其吮吸无障碍）的父元素使用aria-haspopup=true，或触摸删除它启用IE10/IE11，无论是在服务器端或相应的Javascript。