首页 > 代码库 > 移动端自定义事件

移动端自定义事件

移动端的事件类型和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>

 

 

移动端自定义事件