Question

Bootstrap-slider.js（http://www.eyecon.ro/bootstrap-slider）鼠标事件无法在触摸屏设备上运行。

当我只有鼠标设备时，鼠标事件运行良好，当我有一个没有鼠标的触摸屏设备时，所有触摸事件都在工作。

我有一个带鼠标的触摸屏笔记本电脑，所以当我用触摸移动滑块时，它运行良好，但当我用鼠标移动滑块时不起作用。

控制台中没有错误。

最后我通过删除＆＃34; this.touchCapable＆＃34;来解决问题。并绑定触摸和鼠标事件（touchmove，touchstart，touchend，mousedown，mousemove和mouseup）。

以下代码是我在＆＃34; Bootstrap-slider.js＆＃34;中的更改，滑块在所有3种情况下都很好用（触摸屏，仅鼠标，带鼠标的触摸屏）。

//if (typeof Modernizr !== 'undefined' && Modernizr.touch) {
        //    this.touchCapable = true;
//}

//if (this.touchCapable) {
// Touch: Bind touch events:
this.picker.on({
    touchstart: $.proxy(this.mousedown, this)
});
//} else {
this.picker.on({
    mousedown: $.proxy(this.mousedown, this)
});
//}

//if (this.touchCapable && ev.type === 'touchstart') {
if (ev.type == "touchmove" || ev.type == "touchstart" || ev.type == "touchend") {
     ev = ev.originalEvent;
}

//if (this.touchCapable) {
if (ev.type == "touchmove" || ev.type == "touchstart" || ev.type == "touchend") {
    // Touch: Bind touch events:
    $(document).on({
         touchmove: $.proxy(this.mousemove, this),
         touchend: $.proxy(this.mouseup, this)
    });} else {
    $(document).on({
         mousemove: $.proxy(this.mousemove, this),
         mouseup: $.proxy(this.mouseup, this)
     });
   }

// Touch: Get the original event:
//if (this.touchCapable && ev.type === 'touchmove') {
if (ev.type == "touchmove" || ev.type == "touchstart" || ev.type == "touchend") {
    ev = ev.originalEvent;
}

//if (this.touchCapable) {
if (ev.type == "touchmove" || ev.type == "touchstart" || ev.type == "touchend") {
    // Touch: Bind touch events:
    $(document).off({
          touchmove: this.mousemove,
          touchend: this.mouseup
     });} else {
     $(document).off({
         mousemove: this.mousemove,
         mouseup: this.mouseup
     });
}

//if (this.touchCapable) {
if (ev.type == "touchmove" || ev.type == "touchstart" || ev.type == "touchend") {
    ev = ev.touches[0];
}

Answer 1

请使用jQuery UI Touch Punch plugin触发与其鼠标事件对应的所有触摸事件。

谢谢， VARUN。

“Bootstrap-slider.js”鼠标事件无法在触摸屏设备上运行

1 个答案: