zoukankan      html  css  js  c++  java
  • 阻止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();
    		}
    		
    	}
    

      

  • 相关阅读:
    Asp.NET 4.0 ajax实例DataView 模板编程1
    ASP.NET 4.0 Ajax 实例DataView模板编程 DEMO 下载
    部分东北话、北京话
    .NET 培训课程解析(一)
    ASP.NET 4.0 Ajax 实例DataView模板编程2
    ASP.NET Web Game 架构设计1服务器基本结构
    ASP.NET Web Game 构架设计2数据库设计
    TFS2008 基本安装
    Linux上Oracle 11g安装步骤图解
    plsql developer远程连接oracle数据库
  • 原文地址:https://www.cnblogs.com/djiz/p/8027135.html
Copyright © 2011-2022 走看看