阻止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 ...
随机推荐
- PHPCMS的自增长标签
设置幻灯片的时候,需要用到自增长ID. <div class="tt_pic"><img src="images/1.gif" />&l ...
- electron 开发记录
判断是否开发环境 安装 electron-is-dev npm install electron-is-dev // main.js const isDev = require('electron-i ...
- ElasticSearch服务器操作命令
在win7环境,进入elasticsearch安装目录的bin目录: 1. elasticsearch.bat 就可以启动elasticsearch了.运行这个插件的好处是:elasticsearch ...
- Windbg .net内存调试有用的命令(笔记 )
和.net内存调试相关的Windbg命令 首先.load sosex.dll加载ex调试扩展dll 1.!gcgen [obj地址] 显示对象属于gc代数 2.!dumpgen [0/1/2] dum ...
- bootstrap Table 服务端处理分页 后台是.net
要考虑函数可被可重复使用(调用),需要将可变化的变为参数封装起来 function HQCreatTables(ob) { var option = { method: 'get', dataType ...
- 【Shell脚本学习24】Shell输入输出重定向:Shell Here Document,/dev/null文件
Unix 命令默认从标准输入设备(stdin)获取输入,将结果输出到标准输出设备(stdout)显示.一般情况下,标准输入设备就是键盘,标准输出设备就是终端,即显示器. 输出重定向 命令的输出不仅可以 ...
- HDU 1059 Dividing 分配(多重背包,母函数)
题意: 两个人共同收藏了一些石头,现在要分道扬镳,得分资产了,石头具有不同的收藏价值,分别为1.2.3.4.5.6共6个价钱.问:是否能公平分配? 输入: 每行为一个测试例子,每行包括6个数字,分别对 ...
- leetcode——2
1. 题目 Add Two Numbers You are given two linked lists representing two non-negative numbers. The digi ...
- hdu-1166 敌兵布阵---树状数组模板
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1166 题目大意: 维护动态的区间和,单点更新,就是模板题 #include<iostream& ...
- Java的内存回收机制详解X
http://blog.csdn.net/yqlakers/article/details/70138786 1 垃圾回收的意义 在C++中,对象所占的内存在程序结束运行之前一直被占用,在明确释放之前 ...