移动端自定义事件

Posted 2020-08-21

移动端的事件类型和PC端的不同，有touchstart,touchmove,touchend...

今天，用了touchstart和touchend封装了一个左右上下滑动的触发事件（这里的封装就用到了订阅者发布模式）

步骤：一、创建事件（document.createEvent（“customEvent”））

　　   二、初始化事件　(event.initCustomEvent("事件名称"，true，true，{key：value}))

　　　　　　第二。第三个参数表示是否冒泡，是否取消，第四个参数是在时间触发时携带的额外的数据，它会保存在事件对象的detail属性中

　　   三、分发事件　　　<---（发布者）

　　　　　　分发给需要的dom对象

　　　四、DOM对象事件绑定　　<---(订阅者)

思路：

　　在touchstart，也就是开始触摸时获取到坐标，将这些坐标值保存在一个对象字面量中，touchend阶段再获取一次坐标值保存到对象中

然后开始比较。

<div style="width:100%;height:600px;" id="box">我是内容</div>
	<script>
		var box = document.getElementById("box");
		function swipe(obj){
			var initCoord = {	//初始化坐标	
				sx : 0,			  /*模*/
				sy : 0,			/*订阅者*/
				ex : 0,			  /*式*/
				ey : 0
			}
			//监听事件，获取开始位置坐标
			obj.addEventListener("touchstart",function(e){
				// console.info(e.targetTouches[0].pageX);
				initCoord.sx = e.targetTouches[0].pageX;
				initCoord.sy = e.targetTouches[0].pageY;
			})

			//结束地点坐标
			obj.addEventListener("touchend",function(e){

				initCoord.ex = e.changedTouches[0].pageX;
				initCoord.ey = e.changedTouches[0].pageY;
				//判断向左还是向右
				if(initCoord.sx-initCoord.ex > 30){	//向左
					//创建自定义事件
					var event = document.createEvent("customEvent");
					//初始化
					event.initCustomEvent("swipeLeft",true,true,{data:"value"});
					this.dispatchEvent(event);//事件分发	//发布消息	将时间分发到事件对象上了
					// console.info("向左滑")		
				}
				if(initCoord.ex - initCoord.sx >30){
					var event = document.createEvent("customEvent");
					//初始化
					event.initCustomEvent("swipeRight",true,true,{data:"value"});
					this.dispatchEvent(event);//
					// console.info("向右滑")
				}
				if(initCoord.sy - initCoord.ey > 30){
					var event = document.createEvent("customEvent");
					event.initCustomEvent("swipeUp",true,true,{data:"value"});
					this.dispatchEvent(event);
					// console.info("向上滑")
				}
				if(initCoord.ey - initCoord.sy >30){
					var event = document.createEvent("customEvent");
					event.initCustomEvent("swipeDown",true,true,{data:"value"});
					this.dispatchEvent(event);
					// console.info("向下滑")
				}
			});
		};

		swipe(box);

		box.addEventListener("swipeRight",function(e){
			console.info("向右滑",e.detail.data,e)
		})
　　</script>