阻止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>
        }
         
    }

  

posted @   djiz  阅读(2703)  评论(0编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· DeepSeek+PageAssist实现本地大模型联网
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· 从 14 秒到 1 秒:MySQL DDL 性能优化实战
点击右上角即可分享
微信分享提示