的Javascript觸摸事件出問題

我目前正在創建在Javascript中一些滑塊，用於提供與觸摸使用，而我得到的結果不是我所希望的全部。的Javascript觸摸事件出問題

當按住滑塊手柄之一，它得到一個半透明的暗灰色覆蓋（比如當你持有下來iOS上的所有環節上做到）。完成此操作後，無法拖動手柄。

這使得它們非常難以使用，正如您可以想象的那樣。

我遇到的另一個問題是頁面滾動。除非我獲得接近完美的水平滑動，否則iOS Safari會認爲我正在嘗試滾動頁面並停止js。

我知道它可以解決這些問題，因爲jQuery移動不與他們的滑塊有他們。我已經通過jQuery移動滑塊的源代碼，但我無法找到他們如何防止這些問題。

關於我能做些什麼來解決這個問題的任何想法？

的jQuery移動的滑塊 - http://jquerymobile.com/demos/1.1.0/docs/forms/slider/

來源

2012-05-19 Thrashbarg

你爲什麼不使用他們的滑塊？他們有一個龐大的團隊在移動事件上努力工作，並且工作出色。 – Jivings

@Jivings它不夠定製，不適合我的需求。我專門創建了一個顏色滑塊，我嘗試使用jQuery移動設備，但發現它對所有其他方面都具有侵襲性。 – Thrashbarg

不幸的是，你將不得不經歷從點擊事件確定觸摸和拖動事件的艱難過程。我期望這是問題所在。 – Jivings

問題1 - 灰色框上點擊：

添加這個CSS的所有元素：

-webkit-tap-highlight-color: rgba(0,0,0,0);

你可能也想用這些以及停止突出顯示：

-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none;

問題2 - 停止滾動

你所需要的touchstart和touchend，你會需要它添加到處理程序事件的處理程序。

event.preventDefault();

請注意，這將停止滾動和縮放以及。如果你還想縮放，你可能需要重新實現或使用額外的庫。在觸摸事件

很好的參考信息

教程： http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

蘋果文檔（這對觸摸和鼠標事件之間的關係很好的解釋）： https://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

來源

2012-05-21 23:22:42

謝謝你的回答！我已經有event.preventDefault（）;但在錯誤的處理程序！現在所有作品都可愛。 – Thrashbarg

喜歡點擊高亮顏色的提示。非常感激！ – the0ther

的Javascript觸摸事件出問題

回答

相關問題