Question

我创建了一个使用http://loopj.com/jquery-simple-slider/创建输入值滑块的表单，效果很好。然而，我的问题是它在触摸设备上并不是很棒，因为它会监听鼠标移动事件。

在脚本中我发现这个位应该与它正在侦听的鼠标事件有关：

this.track.mousedown(function(e) {
return _this.trackEvent(e);
});
if (this.settings.highlight) {
this.highlightTrack.mousedown(function(e) {
  return _this.trackEvent(e);
});
}
this.dragger.mousedown(function(e) {
if (e.which !== 1) {
  return;
}
_this.dragging = true;
_this.dragger.addClass("dragging");
_this.domDrag(e.pageX, e.pageY);
return false;
});
$("body").mousemove(function(e) {
if (_this.dragging) {
  _this.domDrag(e.pageX, e.pageY);
  return $("body").css({
    cursor: "pointer"
  });
}
}).mouseup(function(e) {
if (_this.dragging) {
  _this.dragging = false;
  _this.dragger.removeClass("dragging");
  return $("body").css({
    cursor: "auto"
  });
}
});

无论如何，我不是jQuery或Javascript专家。您知道是否可以为滑块添加触控功能？非常感谢帮助！： - ）

Answer 1

我设法通过添加jQuery mobile来解决这个问题：

<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

然后修改我之前粘贴的部分代码：

  this.track.bind('vmousedown',function(e) {
    return _this.trackEvent(e);
  });
  if (this.settings.highlight) {
    this.highlightTrack.bind('vmousedown',function(e) {
      return _this.trackEvent(e);
    });
  }
  this.dragger.bind('vmousedown',function(e) {
    _this.dragging = true;
    _this.dragger.addClass("dragging");
    _this.domDrag(e.pageX, e.pageY);
    return false;
  });
  $("body").bind('vmousemove',function(e) {
    if (_this.dragging) {
      _this.domDrag(e.pageX, e.pageY);
      return $("body").css({
        cursor: "pointer"
      });
    }
  }).bind('vmouseup',function(e) {
    if (_this.dragging) {
      _this.dragging = false;
      _this.dragger.removeClass("dragging");
      return $("body").css({
        cursor: "auto"
      });
    }
  });

现在它也适用于移动设备： - ）

滑块：如何在移动设备上翻译mousemove（点击并按住）

1 个答案: