關閉觸摸設備上onClick元素上的疊加層選擇

我正在構建一個web應用程序，但點擊某個按鈕或至少一個可點擊的對象後，它會獲得一個藍色疊加層，如文本選擇，但是物體。這隻發生在觸摸設備上，而不發生在我的臺式機上。關閉觸摸設備上onClick元素上的疊加層選擇

它是用HTML和CSS構建的，所以我希望有人知道這個適當的解決方案。

我花了大約20個屏幕截圖，因爲這個覆蓋圖僅在不到半秒內纔可見。對於那些想知道我其實是什麼意思的人，檢查這張照片。我已經在iPhone（5）和Android（Nexus 5）上測試過了，兩者（儘管顏色不同）似乎都具有這種視覺效果。這是一個HTML事物或設備原生的東西。有一件事是肯定的：它可以出發，因爲我從來沒有在普通的應用程序中看到過。注意：這發生在任何可點擊的項目上，而不僅僅是文本鏈接。 Screencap

謝謝！

來源

2014-02-27 Sander Schaeffer

我想這是爲了讓用戶可以看到該項目是可以點擊的。如果你關心輔助功能，你不會對此做任何事情。在桌面上，當您使用「標籤」按鈕時，或者在鏈接上單擊並按住鼠標按鈕（出現虛線邊框）時，您將獲得相同的效果。 *如果您想更改它，請查找CSS屬性outline（用於桌面）。 – LinkinTED

根據你的評論，你會說所有當前的移動開發者（本地和網絡應用程序）不關心（更少）有關可訪問性？因爲我從來沒有在任何應用程序中看到這種藍色（或任何顏色）覆蓋。在我看來，如果用戶不知道它是可點擊的，那麼你的設計就是錯誤的。在這一刻，這個覆蓋看起來很可怕，但更糟的是：整個應用程序是綠色的，覆蓋層是藍色的。這是整個風格的混亂。無論如何 - 我會看看「輪廓」，誰知道這可能會訣竅。謝謝！ –

我很高興地找到正確的方式來調整觸摸設備的這個愚蠢的習慣。這非常簡單。

您可以將其關閉（如下面的代碼）或將您自己的類/ ID添加到選擇器中。

a { 
... 
    -webkit-tap-highlight-color: rgba(0,0,0,0) 
}

就這樣！

測試上都幾Android和iOS設備，包括iPhone 5 &的Nexus 5

來源

2014-02-27 09:48:35

嘗試...

工作http://jsfiddle.net/XbVUR/

a{ 
-moz-user-select: none; 
-webkit-user-select: none; 
-ms-user-select:none; 
user-select:none; 
} 

<a href="#" onClick="alert(0)" unselectable='on' onselectstart='return false;' onmousedown='return false;'>lorem ipsum</a>

來源

2014-02-27 08:53:47 Abhineet

請查看我在開場白中添加的屏幕截圖。它是JSFiddle的屏幕截圖，其中藍色疊加層仍然顯示。 –

關閉觸摸設備上onClick元素上的疊加層選擇

回答

相關問題