Angular Slider Touch 不适用于指令

Posted 2023-03-12

【中文标题】Angular Slider Touch 不适用于指令

【英文标题】：Angular Slider Touch not working with directive

【发布时间】：2013-10-22 11:20:17

【问题描述】：

我在我的应用程序中使用以下指令

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

当我尝试在屏幕上拖动滑块时，除了触控支持之外，一切正常。 Touch 适用于给出的示例，但不适用于我的应用程序。我已经检查过我使用的是相同版本的 angular 等。

我的代码： 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>

是否需要添加任何内容才能获得对移动设备的触控支持？

谢谢！

【参考方案1】：

对于仍然遇到此问题的任何人，这可能会有所帮助：JS: How does event.touches property work?“听起来 jQuery 没有在其自定义事件对象中传递 touches 属性。”

这为我解决了问题。改变这个：

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;
              ...

（我的 angular-slider.js 版本的第 227 行）

【讨论】：

谢谢！我不明白你为什么省略“var”？

Delos，在下面查看我的答案以获得 Firefox 解决方案。

【参考方案2】：

从滑块指令的代码看来，您似乎不需要做任何特别的事情来支持触摸事件。我用您提供的代码组装了一个 plunker here，一切都按预期工作。我已经在我的 Sony xperia 手机上使用 chrome 对其进行了测试。

【讨论】：

感谢您的回复。您提供的示例也适用于我的手机。我得出的结论是我的应用程序与触摸支持发生了某种冲突。我正在使用 MEAN 堆栈，我什至创建了一个只有一个滑块的应用程序，但我仍然没有获得触摸支持 - 指针在触摸时会突出显示，但没有拖动。

这里是否有 jquery/另一个库可能导致冲突？

我能想到的两个常见冲突。 1/您的页面上有溢出，浏览器无法判断您是要移动页面还是开始滑块拖动（尝试将 css overflow:hidden 放在 body 标记上）。 2/ 在代码的某处，touchmove 上有一个事件处理程序，用于停止 dom 事件的传播。但是这个会更难发现。

再次感谢。我终于找到了导致问题的原因。出于某种原因，如果我在滑块之前加载 jquery，则会发生冲突。在滑块之后加载它，它工作正常。感谢您的帮助。

在滑块之后加载它意味着您正在使用带有角度的 jqLit​​e 作为角度滑块，这会导致其他问题。

【参考方案3】：

使用上述 Ryan 的修复程序，我设法让我的滑块按预期工作。然而，正如 cmets 中所提到的，它也确实打破了我的 Firefox。为了修复 Firefox 问题，在 angular-slider.js 中还需要进行以下更改：

第 79 行：

变化：

sliderDirective = function($timeout) 

通过添加$window 参数：

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];

【参考方案4】：

你也可以试试ng-slider

它允许触摸设备点击切换而不是拖动（这在触摸设备上非常困难）。

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