最近适用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();
} }

  

阻止touchslider事件冒泡,防止左右滑动时出发全局滑动事件的更多相关文章

  1. 前端的事件冒泡(例如点击一次onclick事件执行两次)解决办法

    问题概要: 当我运用antd 中 radio组件的时候发现radio组件是有bug的 就是你不能给他赋予id 和 value,同时也绑定不上onclick等事件.举个例子: 可以看到 你就算赋予了id ...

  2. 移动端滑动时页面惯性滑动overflow-scrolling: touch

    -webkit-overflow-scrolling:auto | touch; auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止 touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一 ...

  3. JQuery阻止事件冒泡

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点 ...

  4. vue2.0阻止事件冒泡

    <!--picker弹窗--><transition name="fade"> <div class="picker_wrap" ...

  5. vue 表格阻止父元素冒泡事件

    思路如下:1.给复选框定义一个类型,type="selection" 2.在点击函数中就可以使用判断条件来进行复选框的阻止冒泡.rowDetailShow(row, event, ...

  6. JS事件冒泡及阻止

    事件冒泡及阻止 当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传递了事件,也不会有什么表 ...

  7. jquery 事件冒泡的介绍以及如何阻止事件冒泡

    在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...

  8. react 阻止事件冒泡

    前言 在学习react阻止事件冒泡,需要先了解 合成事件 和 原生事件 合成事件:在jsx中直接绑定的事件,就是合成事件: 原生事件: 通过js原生代码绑定的事件,就是原生事件: react事件:re ...

  9. JavaScript事件冒泡机制和阻止事件冒泡及默认事件

    一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event ...

随机推荐

  1. java对象在内存中的分配

    java对象在内存中的分配 http://blog.csdn.net/qq_30753945/article/details/54974899

  2. 深刻理解Linux进程间通信(IPC)

    https://www.ibm.com/developerworks/cn/linux/l-ipc/ linux下进程间通信的几种主要手段简介: 管道(Pipe)及有名管道(named pipe):管 ...

  3. [转]gbk和utf8的区别

    转自:百度经验 GBK编码:是指中国的中文字符,其它它包含了简体中文与繁体中文字符,另外还有一种字符“gb2312”,这种字符仅能存储简体中文字符. UTF-8编码:它是一种全国家通过的一种编码,如果 ...

  4. 精心整理的SQL语句学习大全

    -语 句 功 能  --数据操作SELECT --从数据库表中检索数据行和列INSERT --向数据库表添加新数据行DELETE --从数据库表中删除数据行UPDATE --更新数据库表中的数据-数据 ...

  5. qemu 出现Could not access KVM kernel module: No such file or directory failed to initialize KVM: No such file or directory

    使用qemu命令 qemu-system-x86_64 -hda image/ubuntu-test.img -cdrom ubuntu-16.04.2-server-amd64.iso -m 102 ...

  6. zookeeper的简单搭建,java使用zk的例子和一些坑

    一 整合 由于本人的码云太多太乱了,于是决定一个一个的整合到一个springboot项目里面. 附上自己的github项目地址 https://github.com/247292980/spring- ...

  7. Ashx增删改查_动软

    1.首先展示列表 ashx 讲究的是个替换 这些就是属于ashx麻烦的地方 public void ProcessRequest(HttpContext context) { context.Resp ...

  8. linux下安装redis和部署

    转自简书:https://www.jianshu.com/p/bc84b2b71c1c 1.基础知识  redis是用C语言开发的一个开源的高性能键值对(key-value)数据库.它通过提供多种键值 ...

  9. Kyligence Analytics Platform Enterprise

    平台: arm 类型: ARM 模板 软件包: kap 2.3 kyanalyzer 2.3 apache kylin basic software bi big data cube data war ...

  10. C# DateTime的时区

    C#中可以通过DateTime的Kind属性指定DateTime的时区 DateTimeKind有3个枚举值: Unspecified:未指定为UTC时间或本地时间 Utc: UTC时间 Local: ...