在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。