阻止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();
		}

	}

  

时间: 2024-10-14 05:27:45

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

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

问题概要: 当我运用antd 中 radio组件的时候发现radio组件是有bug的 就是你不能给他赋予id 和 value,同时也绑定不上onclick等事件.举个例子: 可以看到 你就算赋予了id 和value 前端页面渲染也是不正常的 value无论赋成什么 结果都是on但是我还需要对他进行一些操作需要绑定他的onclick事件 所以我得解决办法就是在radio标签外套了一层div 绑定了id属性,同时将onclick事件绑定在这层div上.当我们触发它时,通过jQuery的子选择器找到内

阻止事件冒泡和阻止后续代码执行

冒泡事件是点击子集标签的事件会触发父级标签的事件: 对应的jQuery代码如下: <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件 $("#msg").click(function(

事件冒泡。阻止事件冒泡 |阻止元素的默认行为

<.1> 如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出 现冒泡问题. 触发的顺序是从小范围到大范围. 这就是所谓的冒泡现象,一层一层往上. <html> <head> <title></title> <script src="jquery-2.1.3.js"></script> <style type="text/css"> div#a {

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

思路如下:1.给复选框定义一个类型,type="selection" 2.在点击函数中就可以使用判断条件来进行复选框的阻止冒泡.rowDetailShow(row, event, column) {if(column.type !== 'selection') {this.selectedItem = rowthis.detailShow = true}this.tableIndex = row.tableId},这样是一种方法,因为复选框一般都是与表格同步存在的.还有一种简单的方法,

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

原文地址:http://www.jb51.net/article/32792.htm 什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 如何来阻止Jquery事件冒泡? 通过一

vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别

一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type="button" value="按钮" @click="show1($event)"> </div> methods:{ show1:function(ev){ console.log(ev); alert(1); ev.cancelB

事件冒泡与默认行为

在说事件冒泡之前,我们先说说事件对象(Event) Event 在触发DOM上某个事件时,会产生一个事件对象event,这个对象包含着所有事件有关的信息(导致事件的元素.事件的类型.与特定事件相关的信息) 所有浏览器都支持Event对象,但支持方式不同 IE中的事件对象:window.event /* 封装Event对象 IE:window.event */ function getEvent(event){ return event?event:window.event; } 事件冒泡 什么是

看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序

最近一个项目基于3维skyline平台,进行javascript二次开发.对skyline事件的设计真是无语至极,不堪折磨啊!抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素

事件冒泡&amp;正则表达式

JS中为元素指定事件的三种方法: element.addEventListener(type,listener,boolean); type是事件的类型,比如“click”,“mouseover”,listener是指事件的处理函数,布尔值为false值事件的冒泡,true是指事件捕获,此方法适合现在的主流浏览器,谷歌火狐等等 element.attachEvent(type,listener); type是事件类型,不过要加“on”,listener是指事件的处理函数,适用IE8及以前的浏览器