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();
    		}
    		
    	}
    

      

  • 相关阅读:
    skynet debug console 使用
    在linux上定时修改root密码,以邮件形式发送给使用者
    在linux nginx服务器上,给内网ip配置https
    在linux apache服务器上,给内网ip配置https
    redis集群配置
    记一次删除k8s namespace无法删除的问题
    向docker镜像中传递变量的两种方式
    用kubeadm简单部署k8s
    第十六天python3 文件IO(二)
    第十五天python3 文件IO(一)
  • 原文地址:https://www.cnblogs.com/djiz/p/8027135.html
Copyright © 2011-2022 走看看