移动端的事件类型和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>
时间: 2024-10-10 22:09:53