阻止touchslider事件冒泡，防止左右滑動時出發全局滑動事件

最近適用mui開發一個項目，全局有個側滑菜單offCanvasSideScroll，首頁用了一個touchslider插件來實現行的左右滾動

touchslider的當滾動方向與側滑菜單滾動方向一致時，會觸發側滑菜單的事件，打開側滑菜單。開始想關閉側滑菜單的監聽事件，點擊按鈕再調出側滑菜單，百度無果。

后來想touchslider滾動時能不能阻止事件向上冒泡，從官網下載touchslider源碼

 

先是再開始函數增加event.stopPropagation();  結果各種問題，滾動時有小幅的上下移動現象。

//觸摸開始函數
var tStart = function(e){
clearTimeout( timeout );clearTimeout( endTimeout );
scrollY = undefined;
distX = 0;
var point = hasTouch ? e.touches[0] : e;
startX = point.pageX;
startY = point.pageY;

//添加“觸摸移動”事件監聽
conBox. addEventListener(touchMove, tMove,false);
//添加“觸摸結束”事件監聽
conBox.addEventListener(touchEnd, tEnd ,false);
event.stopPropagation();   //阻止向上冒泡
}

 

加到觸摸移動函數，中的 if( !scrollY ){ 分支  即能阻止向上冒泡，又不影響上下滾動。

//觸摸移動函數
	var tMove = function(e){
		if( hasTouch ){ if ( e.touches.length > 1 || e.scale && e.scale !== 1) return }; //多點或縮放

		var point = hasTouch ? e.touches[0] : e;
		distX = point.pageX-startX;
		distY = point.pageY-startY;

		if ( typeof scrollY == 'undefined') { scrollY = !!( scrollY || Math.abs(distX) < Math.abs(distY) ); }
		if( !scrollY ){ 
			e.preventDefault(); if(autoPlay){clearInterval(inter) }
			switch (effect){
				case "left":
					if( (index==0 && distX>0) || (index>=navObjSize-1&&distX<0 )){ distX=distX*0.4 }
					translate( -index*slideW+distX ,0 );
				break;
				case "leftLoop":translate( -(index+1)*slideW+distX ,0 );break;
			}
			
			if(  sLoad!=null && Math.abs(distX)>slideW/3 ){ 
				doSwitchLoad( distX>-0?-1:1 ) 
			}
			event.stopPropagation();
		}
		
	}