阻止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();
} }
阻止touchslider事件冒泡,防止左右滑动时出发全局滑动事件的更多相关文章
- 前端的事件冒泡(例如点击一次onclick事件执行两次)解决办法
问题概要: 当我运用antd 中 radio组件的时候发现radio组件是有bug的 就是你不能给他赋予id 和 value,同时也绑定不上onclick等事件.举个例子: 可以看到 你就算赋予了id ...
- 移动端滑动时页面惯性滑动overflow-scrolling: touch
-webkit-overflow-scrolling:auto | touch; auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止 touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一 ...
- JQuery阻止事件冒泡
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点 ...
- vue2.0阻止事件冒泡
<!--picker弹窗--><transition name="fade"> <div class="picker_wrap" ...
- vue 表格阻止父元素冒泡事件
思路如下:1.给复选框定义一个类型,type="selection" 2.在点击函数中就可以使用判断条件来进行复选框的阻止冒泡.rowDetailShow(row, event, ...
- JS事件冒泡及阻止
事件冒泡及阻止 当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传递了事件,也不会有什么表 ...
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...
- react 阻止事件冒泡
前言 在学习react阻止事件冒泡,需要先了解 合成事件 和 原生事件 合成事件:在jsx中直接绑定的事件,就是合成事件: 原生事件: 通过js原生代码绑定的事件,就是原生事件: react事件:re ...
- JavaScript事件冒泡机制和阻止事件冒泡及默认事件
一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true: FF下:event ...
随机推荐
- Linux中vim编辑器的缩进的功能键
vim编程时,经常需要对代码进行缩进处理,以增加程序的可读性和后期的代码维护. 可以采用多种方式达到缩进的目的: 1) 命令模式(command mode) 2) Visual模式(visual mo ...
- 【JavaEE】Web Service 的工作原理
Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的 ...
- pat1081. Rational Sum (20)
1081. Rational Sum (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Given N ...
- Java排序算法(二)
java排序算法(二) 二.改进排序算法 2.1希尔排序 定义:希尔排序(ShellSort)是插入排序的一种.也称缩小增量排序,是直接插入排序算法的一种更高效的改进版本.希尔排序是非稳定排序算法. ...
- How to Install VMware Tools on RHEL 7/CentOS 7
The original address Mware Tools is one of important components for virtual machine (VM) in order ge ...
- javascript获取滚动条位置(兼容所有浏览器)
有两种方式来获取浏览器滚动条的位置 第一种:document.documentElement.scrollTop 第二种:$("body").scrollTop() 第一种方式能够 ...
- 改善WPF应用程序性能的10大方法 (转发)
WPF(Windows Presentation Foundation)应用程序在没有图形加速设备的机器上运行速度很慢是个公开的秘密,给用户的感觉是它太吃资源了,WPF程序的性能和硬件确实有很大的关系 ...
- weblogic 忘记控制台账号密码 进行重新设置
第一步:首先要关闭weblogic服务. 第二步:对一些重要的文件进行备份: 1. 为了保证操作安全,备份%DOMAIN_HOME%/security/DefaultAuthenticatorInit ...
- iOS开发 - 在状态栏显示FPS,CPU和内存信息
原理 FPS的计算 CoreAnimation有一个很好用的类CADisplayLink,这个类会在每一帧绘制之前调用,并且可以获取时间戳.于是,我们只要统计出,在1s内的帧数即可. - (void) ...
- Merge更新同步一个表
merge T2 --目标表using T1 --源表 on T1.id=T2.id --匹配条件 when matched then --匹配update set [name]= ...