使用manos.malihu插件从转盘到下一选项卡的BootStrap过渡

Question

请帮助我找到一个解决方案，这将是非常有用的许多其他人在我之后。

我有一个用Bootstrapie做的简单/标准的旋转木马。在Android浏览器中，当我想用向右或向左滑动转到轮播中的下一个或上一个选项卡时，问题就开始了。我知道有大量的插件提供了这样的功能引导转盘。我使用了最简单的方式，使用来自jQuery移动设备的组件“触摸”。当我使用桌面浏览器(chrome、ff、opera)并使用鼠标向左/向右滑动时，一切都很好用(更换卡片)。然而，当我使用android浏览器时，我就没有这样的可能性。我诊断了为什么会发生这种情况(不幸的是，这与插件启用的swipe是如此的独立，我浪费了很多时间去寻找一个正在运行的插件测试过的hammer.js bootstrap-touch-carousel.js，slick.js，jquery.touchSwipe.js等等)。原因是我使用了plugin - manos.malihu的一个可配置的滚动条。我的诊断是在上面的插件中找到了部分代码: jquery.Custom Scrollbar.js，他负责滑动(以及拦截jQuery手机上的滑动)。下面我在manos.malihu插件中粘贴负责滑动的代码：

/*
  TOUCH SWIPE EVENTS
  scrolls content via touch swipe
  Emulates the native touch-swipe scrolling with momentum found in iOS, Android and WP devices
  */
  _contentDraggable=function(){
     var $this=$(this),d=$this.data(pluginPfx),o=d.opt,
        namespace=pluginPfx+"_"+d.idx,
        mCustomScrollBox=$("#mCSB_"+d.idx),
        mCSB_container=$("#mCSB_"+d.idx+"_container"),
        mCSB_dragger=[$("#mCSB_"+d.idx+"_dragger_vertical"),$("#mCSB_"+d.idx+"_dragger_horizontal")],
        draggable,dragY,dragX,touchStartY,touchStartX,touchMoveY=[],touchMoveX=[],startTime,runningTime,endTime,distance,speed,amount,
        durA=0,durB,overwrite=o.axis==="yx" ? "none" : "all",touchIntent=[],touchDrag,docDrag,
        iframe=mCSB_container.find("iframe"),
        events=[
           "touchstart."+namespace+" pointerdown."+namespace+" MSPointerDown."+namespace, //start
           "touchmove."+namespace+" pointermove."+namespace+" MSPointerMove."+namespace, //move
           "touchend."+namespace+" pointerup."+namespace+" MSPointerUp."+namespace //end
        ],
        touchAction=document.body.style.touchAction!==undefined;
     mCSB_container.bind(events[0],function(e){
        _onTouchstart(e);
     }).bind(events[1],function(e){
        _onTouchmove(e);
     });
     mCustomScrollBox.bind(events[0],function(e){
        _onTouchstart2(e);
     }).bind(events[2],function(e){
        _onTouchend(e);
     });
     if(iframe.length){
        iframe.each(function(){
           $(this).load(function(){
              /* bind events on accessible iframes */
              if(_canAccessIFrame(this)){
                 $(this.contentDocument || this.contentWindow.document).bind(events[0],function(e){
                    _onTouchstart(e);
                    _onTouchstart2(e);
                 }).bind(events[1],function(e){
                    _onTouchmove(e);
                 }).bind(events[2],function(e){
                    _onTouchend(e);
                 });
              }
           });
        });
     }
     function _onTouchstart(e){
        if(!_pointerTouch(e) || touchActive || _coordinates(e)[2]){touchable=0; return;}
        touchable=1; touchDrag=0; docDrag=0; draggable=1;
        $this.removeClass("mCS_touch_action");
        var offset=mCSB_container.offset();
        dragY=_coordinates(e)[0]-offset.top;
        dragX=_coordinates(e)[1]-offset.left;
        touchIntent=[_coordinates(e)[0],_coordinates(e)[1]];
     }
     function _onTouchmove(e){
        if(!_pointerTouch(e) || touchActive || _coordinates(e)[2]){return;}
        if(!o.documentTouchScroll){e.preventDefault();}
        e.stopImmediatePropagation();
        if(docDrag && !touchDrag){return;}
        if(draggable){
           runningTime=_getTime();
           var offset=mCustomScrollBox.offset(),y=_coordinates(e)[0]-offset.top,x=_coordinates(e)[1]-offset.left,
              easing="mcsLinearOut";
           touchMoveY.push(y);
           touchMoveX.push(x);
           touchIntent[2]=Math.abs(_coordinates(e)[0]-touchIntent[0]); touchIntent[3]=Math.abs(_coordinates(e)[1]-touchIntent[1]);
           if(d.overflowed[0]){
              var limit=mCSB_dragger[0].parent().height()-mCSB_dragger[0].height(),
                 prevent=((dragY-y)>0 && (y-dragY)>-(limit*d.scrollRatio.y) && (touchIntent[3]*2<touchIntent[2] || o.axis==="yx"));
           }
           if(d.overflowed[1]){
              var limitX=mCSB_dragger[1].parent().width()-mCSB_dragger[1].width(),
                 preventX=((dragX-x)>0 && (x-dragX)>-(limitX*d.scrollRatio.x) && (touchIntent[2]*2<touchIntent[3] || o.axis==="yx"));
           }
           if(prevent || preventX){ /* prevent native document scrolling */
              if(!touchAction){e.preventDefault();}
              touchDrag=1;
           }else{
              docDrag=1;
              $this.addClass("mCS_touch_action");
           }
           if(touchAction){e.preventDefault();}
           amount=o.axis==="yx" ? [(dragY-y),(dragX-x)] : o.axis==="x" ? [null,(dragX-x)] : [(dragY-y),null];
           mCSB_container[0].idleTimer=250;
           if(d.overflowed[0]){_drag(amount[0],durA,easing,"y","all",true);}
           if(d.overflowed[1]){_drag(amount[1],durA,easing,"x",overwrite,true);}
        }
     }
     function _onTouchstart2(e){
        if(!_pointerTouch(e) || touchActive || _coordinates(e)[2]){touchable=0; return;}
        touchable=1;
        e.stopImmediatePropagation();
        _stop($this);
        startTime=_getTime();
        var offset=mCustomScrollBox.offset();
        touchStartY=_coordinates(e)[0]-offset.top;
        touchStartX=_coordinates(e)[1]-offset.left;
        touchMoveY=[]; touchMoveX=[];
     }
     function _onTouchend(e){
        if(!_pointerTouch(e) || touchActive || _coordinates(e)[2]){return;}
        draggable=0;
        e.stopImmediatePropagation();
        touchDrag=0; docDrag=0;
        endTime=_getTime();
        var offset=mCustomScrollBox.offset(),y=_coordinates(e)[0]-offset.top,x=_coordinates(e)[1]-offset.left;
        if((endTime-runningTime)>30){return;}
        speed=1000/(endTime-startTime);
        var easing="mcsEaseOut",slow=speed<2.5,
           diff=slow ? [touchMoveY[touchMoveY.length-2],touchMoveX[touchMoveX.length-2]] : [0,0];
        distance=slow ? [(y-diff[0]),(x-diff[1])] : [y-touchStartY,x-touchStartX];
        var absDistance=[Math.abs(distance[0]),Math.abs(distance[1])];
        speed=slow ? [Math.abs(distance[0]/4),Math.abs(distance[1]/4)] : [speed,speed];
        var a=[
           Math.abs(mCSB_container[0].offsetTop)-(distance[0]*_m((absDistance[0]/speed[0]),speed[0])),
           Math.abs(mCSB_container[0].offsetLeft)-(distance[1]*_m((absDistance[1]/speed[1]),speed[1]))
        ];
        amount=o.axis==="yx" ? [a[0],a[1]] : o.axis==="x" ? [null,a[1]] : [a[0],null];
        durB=[(absDistance[0]*4)+o.scrollInertia,(absDistance[1]*4)+o.scrollInertia];
        var md=parseInt(o.contentTouchScroll) || 0; /* absolute minimum distance required */
        amount[0]=absDistance[0]>md ? amount[0] : 0;
        amount[1]=absDistance[1]>md ? amount[1] : 0;
        if(d.overflowed[0]){_drag(amount[0],durB[0],easing,"y",overwrite,false);}
        if(d.overflowed[1]){_drag(amount[1],durB[1],easing,"x",overwrite,false);}
     }
     function _m(ds,s){
        var r=[s*1.5,s*2,s/1.5,s/2];
        if(ds>90){
           return s>4 ? r[0] : r[3];
        }else if(ds>60){
           return s>3 ? r[3] : r[2];
        }else if(ds>30){
           return s>8 ? r[1] : s>6 ? r[0] : s>4 ? s : r[2];
        }else{
           return s>8 ? s : r[3];
        }
     }
     function _drag(amount,dur,easing,dir,overwrite,drag){
        if(!amount){return;}
        _scrollTo($this,amount.toString(),{dur:dur,scrollEasing:easing,dir:dir,overwrite:overwrite,drag:drag});
     }
  },

我看到桌面浏览器是用来从jQuery手机上刷的。通过鼠标滑动(按鼠标左键并向左或向右拖动)可从旋转木马中更换卡片。使用jQuery mobile的swipe代码：

$('.carousel').swiperight(function() {
   $(this).carousel('prev');
});
$('.carousel').swipeleft(function() {
   $(this).carousel('next');
});

经过多次尝试，我无法在"jquery.mCustomScrollbar.js“中进行更改，这样就可以在安卓浏览器中用手指触摸获得相同的功能。我来自“jquery.mCustomScrollbar.js”的一个函数调用：

jQuery('.carousel-item').mCustomScrollbar({ axis:"y", theme: "rounded-dots", scrollButtons: { enable: true }, scrollInertia: 100});

对于你来说，在jquery.mCustomScrollbar.js中添加/更改代码片段将比我更容易获得两种浏览器(桌面、安卓)的相似功能。

附言:我警告你，当我使用：

contentTouchScroll: false

事实上，我在两个浏览器上都有类似的功能，但这不是方法，因为我阻止了通过触摸(滑动)手指向上/向下滚动的可能性。

github creator plugin上报告的问题

但我猜目前还不可能得到创建者的支持

如果你能帮忙，我将不胜感激。我自己解决这个问题浪费了太多的时间。

关于Zic

Answer 1

这应该只从插件的上面部分移除e.stopImmediatePropagation() (_OnTouch/开始/移动/结束)