角滑塊觸摸不與指令

https://github.com/prajwalkman/angular-slider

這一切都從觸摸的支持工作確定除了當我試圖在屏幕上拖動滑塊下面的指令。 Touch適用於給出的示例，但不適用於我的應用程序。我檢查我使用的角度等相同版本的

我的代碼： filter.js（控制器）

$scope.lower_price_bound = 50; 
$scope.upper_price_bound = 3000;

HTML

<slider floor="10" ceiling="3000" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound"></slider>

我需要添加任何內容獲得移動設備的觸摸支持？

謝謝！

來源

2013-10-22 jeh

從滑塊指令的代碼，似乎你不需要做什麼特別的支持觸摸事件。我已經用你提供的代碼組裝了一個運動員here，並且所有事情都按預期工作。我在我的Sony xperia手機上用鉻進行了測試。

來源

2013-10-22 19:22:56

感謝您的回覆。您提供的示例也適用於我的手機。我已經得出結論，這是我的應用程序與觸摸支持有些衝突。我正在使用MEAN堆棧，我甚至用滑塊創建了一個應用程序，而且我仍然沒有獲得觸摸支持 - 指針在觸摸時突出顯示，但沒有拖動。 – jeh

反正有jquery /另一個lib可能在這裏造成衝突嗎？ – jeh

我能想到的兩個常見衝突。 1 /你的頁面有溢出，並且瀏覽器無法確定是要移動頁面還是開始拖動滑塊（嘗試將css overflow：隱藏在body標籤上）。 2 /在代碼中的某處，touchmove上有一個事件處理程序，用於停止dom事件的傳播。但是這個更難以發現。 –

對於任何仍然遇到這個問題，這可能幫助：JS: How does event.touches property work?「這聽起來像jQuery不流通觸摸財產在其自定義事件的對象。」

這爲我修好了。更改此：

onMove = function (event) { 
       var eventX, newOffset, newPercent, newValue; 
       eventX = event.clientX || event.touches[0].clientX; 
       ...

到

onMove = function() { 
       var eventX, newOffset, newPercent, newValue; 
       eventX = event.clientX || event.touches[0].clientX; 
       ...

來源

2014-10-05 06:07:43 Ryan

謝謝！我不明白爲什麼你忽略了「var」？ – user1259201

這是一個錯誤。我更新了我的答案。 – Ryan

此解決方案適用於IE和Chrome，但在Firefox上失敗。 –

使用上述瑞安的修復（在我的版本角slider.js線227），我設法讓我的滑塊按預期工作。不過，正如評論中提到的那樣，它也爲我打破了Firefox。爲了固定火狐的問題，還需要進行以下更改角slider.js的內部：

79行：

變化：

sliderDirective = function($timeout) {

通過添加$window paramater：

sliderDirective = function($timeout, $window) {

227線：

變化：

onMove = function() { 
    var eventX, newOffset, newPercent, newValue; 
    eventX = event.clientX || event.touches[0].clientX; 
    ...

通過添加customEvent參數來onMove()功能和分配自己event變量（myEvent）：

onMove = function(customEvent) { 
    var eventX, newOffset, newPercent, newValue, 
     myEvent = $window.event || customEvent; 

    eventX = myEvent.clientX || myEvent.touches[0].clientX; 
    ...

這樣，函數要麼使用本地window.event變量（存在於Firefox中）或庫提供的變量。

317線：
最後，通過改變更新依賴聲明：

qualifiedDirectiveDefinition = ['$timeout', sliderDirective];

包括$window

qualifiedDirectiveDefinition = ['$timeout', '$window', sliderDirective];

來源

2014-11-19 15:52:39 spez86

您也可以嘗試ng-slider

它允許觸摸設備單擊切換鍵而不是拖動（這在觸摸設備上非常困難）。

它還提供了更多的功能和配置。

來源

2015-01-29 22:26:28 Oly

角滑塊觸摸不與指令

回答

相關問題