Javascript 角度滑块触摸不使用指令

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

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

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

html

我是否需要添加任何内容以获得对移动设备的触摸支持

---

谢谢

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

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

这个给我修好了。更改此项：

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

到

---

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

使用上面Ryan的修复程序，我成功地让我的滑块按预期工作。然而，正如在评论中提到的，它确实也破坏了我的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;
    ...

通过向

onMove（）

函数添加

customEvent

参数，并分配您自己的

event

变量（

myEvent

）：

这样，函数将要么使用本机

window.event

变量（存在于Firefox中），要么使用库提供的变量

第317行：
最后，通过更改以下内容更新依赖项声明：

qualifiedDirectiveDefinition = ['$timeout', sliderDirective]; 

包括

$window

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

---

您也可以尝试

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

---

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

感谢您的回复。您提供的示例也适用于我的手机。我得出的结论是，我的应用程序在某种程度上与触摸支持相冲突。我使用的是一个平均堆栈，我甚至创建了一个只有一个滑块的应用程序，但我仍然没有触摸支持-指针在触摸时会高亮显示，但没有拖动。这里是否存在jquery/另一个库可能导致冲突？我可以想到两个常见的冲突。1/您的页面出现溢出，浏览器无法判断您是否要移动页面或启动滑块拖动（尝试将css溢出：隐藏在body标记上）。2/在代码中的某个地方，touchmove上有一个事件处理程序，用于停止dom事件的传播。但是这个会更难发现。再次感谢。我终于找到了问题的根源。出于某种原因，如果我在滑块之前加载jquery，就会出现冲突。在滑块后加载，效果良好。感谢您的帮助。在滑块之后加载它意味着您正在使用jqLite with angular作为角度滑块，这会导致其他问题。谢谢！我不明白你为什么省略“var”这个词？Delos，看看我下面的答案，看看Firefox的解决方案。

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

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

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

qualifiedDirectiveDefinition = ['$timeout', sliderDirective]; 

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