阻止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 ){ 分支 即能阻止向上冒泡,又不影响上下滚动。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | //触摸移动函数 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 ) } <strong>event.stopPropagation();</strong> } } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· DeepSeek+PageAssist实现本地大模型联网
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· 从 14 秒到 1 秒:MySQL DDL 性能优化实战