MobileSafari的正確觸摸按鈕行爲

MobileSafari作爲規則具有不正確的HTML按鈕行爲（不正確的含義：「不像iOS本機按鈕」）。正確的按鈕行爲如下：MobileSafari的正確觸摸按鈕行爲

用戶觸摸按鈕：按鈕突出
用戶拖動手指從按鈕：按鈕變暗
用戶拖動手指回按鈕：按鈕突出
用戶拖動手指了按鈕和釋放：按鈕不點擊

MobileSafari按鈕，當你觸摸它們強調，保留高亮不管磨片無論你放開它們的哪個位置（除非視圖滾動，在這種情況下，即使你重新進入按鈕，觸摸也總是被取消）。

此問題適用於所有可點擊的內容，如鏈接（當-webkit-touch-callout設置爲none時）。到目前爲止，我只找到一個具有正確按鈕行爲的Web應用程序：Facebook。看看他們的代碼，看起來他們已經做了很多跳躍式的工作，以使其正常工作（手動跟蹤所有鼠標事件，而不是使用按鈕）。代碼是密集的，使用標槍，而且我還沒有清楚所有需要的工作。

我知道我有點開玩笑自己（因爲如果很簡單，每個人都會這樣做），但我仍然會問。是否有任何通用的代碼可以處理這個功能？有沒有比反向工程Javelin更簡單的解決方案，即使它只適用於WebKit？（Javelin不太適合我的輕量級需求。）我的最終目標是嵌入本地應用的UIWebView的正確按鈕行爲，所以混合的JavaScript/ObjC解決方案也可以接受（儘管沒有想到混合方法）。

來源

2012-01-17 Rob Napier

基本上你想要做的是建立某種混合懸停觸摸設備的功能，它可以檢測您的手指移入/移出按鈕的時間。

我構建了一個基本的JSFiddle，它實現了一些準系統功能。如果你知道任何JavaScript，我想你會明白。

Live JSFiddle DEMO

試試您的iOS設備（也許您的Android設備？）上。

- 布賴恩

來源

2012-05-13 22:19:51 briangonzalez

我這麼努力避免增加（與學習：d）JQuery的用於Web的點點我使用的是在這個特殊的應用程序，但您的演示實際上是相當真棒。謝謝。我需要更多地使用它，因爲我發現它在MobileSafari中表現得有點過分（偶爾它會在你不會想到的時候觸發，有時它不會重新設置）。但基礎知識非常有趣。我不得不重新考慮我對JQuery的避免，因爲我最近在做一些與手寫JavaScript相關的工作。 – 2012-05-14 14:56:37

是的，當你向上/向下滾動時有點不習慣。它當然不能覆蓋所有邊緣情況，但水平移動/移出按鈕的效果相當不錯。學習jQuery的最好方法就是打開一個JSFiddle並開始玩HTML元素。 – briangonzalez 2012-05-14 18:35:39

MobileSafari的正確觸摸按鈕行爲

回答

相關問題