最近适用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. drupal优化全攻略

    下面是drupal优化的一些经验.分四大部分来讲. 第一部分:Drupal系统本身的设置来达到优化 第二部分:针对php代码进行的优化 第三部分:针对MYSQL数据库进行的优化 第四部分:针对网站架构 ...

  2. 操作手册_MyEclipse

    前言 假 如 你 的 人 生 有 理 想,那 么 就 一 定 要 去 追,不 管 你 现 在 的 理 想 在 别 人 看 来是 多 么 的 可 笑 , 你 也 不 用 在 乎 , 人 生 蹉 跎 几  ...

  3. SpringBoot | 第二章:lombok介绍及简单使用

    在去北京培训的时候,讲师说到了lombok这个第三方插件包,使用了之后发现,确实是个神奇,避免了编写很多臃肿的且定式的代码,虽然现代的IDE都能通过快捷键或者右键的方式,使用Generate Gett ...

  4. selenium+phantomjs报错:Unable to find a free port的分析和解决

    selenium+phantomjs报错:Unable to find a free port的分析和解决 Table of Contents 1. 现象 2. 分析 3. 解决办法 1 现象 在做项 ...

  5. OpenStack Ocata Telemetry 警告服务部署

    下列操作在控制节点上进行: 1 准备条件 在配置OpenStack Telemetry服务之前,你必须创建数据库.服务凭证和API端点. 1.1 数据库 以root用户连接数据库服务器,创建glanc ...

  6. Git 常用基本命令汇总

    安装git yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel yum install -y gi ...

  7. ngnix入门配置

    文件1.首先到ngnix下载页面下载你操作系统对应的ngnix压缩包    http://nginx.org/en/download.html 博主我是window10操作系统  上面是我解压之后放的 ...

  8. Vue打包后页面出现cannot get

    学习Vue有大半个月了,然而遇到了不少坑,完全没有高手们那么容易,中间有不少值得记录下的东东,回头好好理理.先理下今天的: Vue打包命令简单啊,直接在命令行输入:npm run build 然而没一 ...

  9. javascript之常用正则表达式

    一.校验数字的表达式 1 数字:^[0-9]*$ 2 n位的数字:^\d{n}$ 3 至少n位的数字:^\d{n,}$ 4 m-n位的数字:^\d{m,n}$ 5 零和非零开头的数字:^(0|[1-9 ...

  10. android-上下文菜单的创建 - 随心

    //Menu设置//覆盖两个方法onCreateOptionsMenu(Menu menu).onOptionsItemSelected(MenuItem Item)//onCreateOptions ...