角滑块触摸不与指令

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

角滑块触摸不与指令

回答

相关问题