在iPhone / iPad / iPod上的Webkit中，<a>點擊元素時不會觸發為標簽的：active偽類指定樣式。我該如何觸發？示例代碼：<style> a:active { background-color: red;}</style><!-- snip --><a href="#">Click me</a>
3 回答
慕標5832272
TA貢獻1966條經驗 獲得超4個贊
<body ontouchstart="">
...
</body>
僅應用了一次，而不是每個按鈕元素都可以修復頁面上的所有按鈕。另外，您可以使用這個名為' Fastclick '的小型JS庫。它可以加快觸摸設備上的點擊事件，也可以解決此問題。
LEATH
TA貢獻1936條經驗 獲得超7個贊
正如其他答案所指出的那樣，:active除非將touch事件附加到元素，否則iOS Safari不會觸發偽類，但是到目前為止，這種行為是“神奇的”。我在Safari開發者庫中遇到了這個小問題，對此做了解釋（強調我的意思）：
您還可以將-webkit-tap-highlight-colorCSS屬性與設置觸摸事件結合使用，以將按鈕配置為類似于桌面。在iOS上，鼠標事件發送得如此之快，以至于永遠不會收到按下或活動狀態。因此，:active僅在HTML元素上設置了觸摸事件時（例如，如下所示在元素上設置ontouchstart時）才觸發偽狀態：
<button class="action" ontouchstart=""
style="-webkit-tap-highlight-color: rgba(0,0,0,0);">
Testing Touch on iOS
</button>
現在，在iOS上輕按并按住按鈕時，該按鈕將更改為指定的顏色，而不會出現周圍的透明灰色。
換句話說，設置一個ontouchstart事件（即使它為空）也明確地告訴瀏覽器對觸摸事件做出反應。
在我看來，這是有缺陷的行為，并且可能可以追溯到“移動”網絡基本不存在的時間（請看鏈接頁面上的屏幕截圖以了解我的意思），并且所有內容都是基于鼠標的。有趣的是，其他更新的移動瀏覽器（例如，在Android上）在觸摸時顯示'：active'偽狀態也很好，而沒有像iOS所需要的任何黑客手段。
（旁注：如果您想在iOS上使用自己的自定義樣式，還可以:active通過使用-webkit-tap-highlight-colorCSS屬性來禁用iOS用來代替偽狀態的默認灰色半透明框，如上面同一鏈接頁中所述）
經過一些實驗后，在所有觸摸事件然后冒泡ontouchstart的<body>元素上設置事件的預期解決方案無法完全發揮作用。如果元素中視可見的頁面加載時，那么它工作正常，但向下滾動和攻絲那是出了視口的元素并不會引發像它應該偽狀態。所以，代替:active
<!DOCTYPE html>
<html><body ontouchstart></body></html>
將事件附加到所有元素，而不是依賴事件冒泡到正文（使用jQuery）：
$('body *').on('touchstart', function (){});
但是，我不知道這樣做對性能的影響，因此請注意。
編輯：此解決方案存在一個嚴重缺陷：即使在滾動頁面時觸摸某個元素也會激活:active偽狀態。靈敏度太強。Android通過在顯示狀態之前引入很小的延遲來解決此問題，如果滾動頁面，則可以將其取消。有鑒于此，我建議僅在選擇的元素上使用它。就我而言，我正在開發一個供現場使用的Web應用程序，該應用程序基本上是用于導航頁面和提交操作的按鈕列表。因為在某些情況下整個頁面幾乎都是按鈕，所以這對我不起作用。但是，您可以設置:hover偽狀態來代替。禁用默認的灰色框后，這可以正常工作。
- 3 回答
- 0 關注
- 931 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消