手机端事件 · 前端

## **pageshow事件**在用户浏览网页时触发。在移动端`window.onload=function(){}`函数里的代码是不生效的，我们可以换成pageshow事件 onpageshow 事件类似于[onload](https://www.runoob.com/jsref/event-onload.html)事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。 ~~~ window.addEventListener('pageshow', function(event) { console.log('after , pageshow :',event); alert(2); }); ~~~ 为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false (查看以下 "更多实例" )。 ``` <body onpageshow="myFunction(event)"> <h1>Hello World!</h1> <script> function myFunction(event) { alert("页面是否从浏览器缓存中加载? " + event.persisted); } </script> </body> ``` 当然还可以使用这种方法 ``` function IsPc() { let userAgent = navigator.userAgent,Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"]; return Agents.some((i)=>{ return userAgent.includes(i) }) } //调用 let state = IsPc(); if(!state){ //返回的是false 则是pc端 window.onload = fetch(); }else{ //返回的是true 则是移动端 fetch(); } ``` ## **click在移动端失效** ~~~ $(".sku-wrap .ok").click(); ~~~ chrome浏览器模拟手机端，在油猴插件中写JS代码，然后发现click()点击失效。解决方法：jquery的click()方法失效，可以使用原生JavaScript的click方法。首先需要将jquery对象转化成JS对象： ~~~ $(".sku-wrap .ok").get(0) ~~~ 然后调用原生JS的click方法： ~~~ $(".sku-wrap .ok").get(0).click(); ~~~ **touch和click的执行顺序：** touchstart --> touchmove --> touchend --> touchcancel --> click https://juejin.cn/post/6844903817964683272 ~~~ window.addEventListener('pageshow', function(event) { $('.product-select-content .item').on('click', '.type-content', function () { alert(33);//移动端时无效果 }) var title=document.querySelector('.type-content'); //触摸开始 document.addEventListener('touchstart',function(event){ title.innerHTML="你正在使用"+event.touches.length+"根手指触摸此页面";//你正在使用1根手指触摸此页面 console.log(event.touches[0]);//包含坐标等信息的touch对象 },false) }); ~~~ ## **touch事件** 手机网页能够响应click事件,不过比较慢。这是为什么?因为click事件触发之后,要等300ms验证是否有下一次点击,如果有的话,视为双击。而机器的双击默认操作,可能是放大视口、弹出辅助菜单等等。大家用手机上网的时候,尤其是看一些PC网站的时候,双击一下屏幕,当前视口变大了。所以我们在给移动端web页面写事件的时候,一般都不用click事件。而是用touch事件。 touch 事件是三个:touchstart、touchmove、touchend touch事件没有延迟,不会等300ms.一旦一个元素身上有touch事件监听,只要你敢碰他,事件就会发生。 touchstart表示触摸开始,这个事件每次触摸只会触发一次。 touchmove表示触摸移动,手指放到屏幕上,移动的时候触发。 touchend 表示触摸结束上面的事件,必须用标准的DOM2级的方法绑定,不能用DOMO级的方式绑定。 ``` box.addEventListener("touchstart",function(){},false); ``` 示例： ``` <body> <div > <h1 id="title">haha</h1> </div> <script type="text/javascript"> var title=document.querySelector('#title'); //触摸开始 document.addEventListener('touchstart',function(event){ title.innerHTML="你正在使用"+event.touches.length+"根手指触摸此页面"; console.log(event.touches[0]); },false) </script> </body> ``` ![](https://img.kancloud.cn/ea/31/ea31dab57b7c6976914ec9672c2a910e_756x227.png) ``` document.addEventListener('touchmove',function(event){ //阻止默认事件 event.preventDefault(); title. innerHTML = ""; for(var i = 0; i< event.touches.length; i++){ title.innerHTML += "第"+ i+ "根手指信息 <br />"; title.innerHTML += event.touches[i].clientX + "<br />" + event. touches[i].clientY + " <br />"; } },false) ``` 触摸结束时，没有手指信息了，触摸信息他会保存再event.changedTouches里 ``` <body> <div > <div id="title">haha</div> </div> <script type="text/javascript"> var title=document.querySelector('#title'); //触摸开始 document.addEventListener('touchend',function(event){ console.log(event.changedTouches);//console.log(event.changedTouches[0]); },false) </script> </body> ``` ![](https://img.kancloud.cn/a3/ee/a3ee039d09ce433aa22c9ad03e56a737_476x271.png) 手指滑动轮播 ``` <body> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ list-style: none; } ul>li{ position: absolute; width: 100%; } </style> <div class="carousel" id="carousel"> <div class="imgsList"> <ul> <li><div style="width: 100%;background-color: red; height: 200px;">0</div></li> <li><div style="width: 100%;background-color: green; height: 200px;">1</div></li> <li><div style="width: 100%;background-color: blue; height: 200px;">2</div></li> <li><div style="width: 100%;background-color: pink; height: 200px;">3</div></li> <li><div style="width: 100%;background-color: orange; height: 200px;">4</div></li> </ul> </div> </div> <script type="text/javascript"> // 屏幕的宽度 var windowWith=document.documentElement.clientWidth; // alert(windowWith) var carousel=document.querySelector('#carousel'); console.log(carousel) var imageLis=document.querySelectorAll('#carousel .imgsList li'); //设置li的默认位置 for(var i = 1; i < imageLis.length ; i++){ imageLis[i].style.webkitTransform = "translateX(" + windowWith + "px)"; } //事件监听 carousel.addEventListener("touchstart", touchstartHandler, false); carousel.addEventListener("touchmove", touchmoveHandler, false); carousel.addEventListener("touchend", touchendHandler, false); var idx=0;//当前图片 var prev=4;//上一张 var next=1;//下一张 // 手指的偏移量 var deltaX; // 开始触摸滑动时手指的位置 var startX; // 时间,判断是否急速滑动 var startTime; /** * 事件处理函数 */ // 滑动开始 function touchstartHandler(event){ event.preventDefault(); startTime==new Date(); //记录偏移量 deltaX=event.touches[0].clientX; startX=event.touches[0].clientX; // 一处过渡效果 imageLis[idx].style.transition="nobe"; imageLis[prev].style.transition="nobe"; imageLis[next].style.transition="nobe"; } // 滑动中 function touchmoveHandler(event){ event.preventDefault(); clientX=event.touches[0].clientX; //改变图片的位置 imageLis[idx] .style.webkitTransform = "translateX(" + (clientX - deltaX) + "px)"; imageLis[next].style.webkitTransform = "translateX(" + (windowWith+clientX -deltaX)+"px)"; imageLis[prev].style.webkitTransform = "translateX(" + (-windowWith+clientX -deltaX)+"px)"; } // 滑动结束 function touchendHandler(event){ event.preventDefault(); // 滑动的时间 var time=new Date()-startTime; //滑动结束判断滑动是否成功右边滑动超过一半或者滑动时间小于500毫秒 var distance=event.changedTouches[0].clientX-startX; if (distance>=windowWith/2 || (distance>0 && time<200)) { // 向右滑动成功 console.log('向右滑动成功') //先改变信号量 next=idx; idx=prev; prev--; if(prev<0){ prev=4; } //添加过渡效果可省略 imageLis[idx].style.transition="all 0.4s ease 0s"; imageLis[next].style.transition="all 0.4s ease 0s"; //改变图片的位置 imageLis[idx].style.webkitTransform = "translateX(0px)"; imageLis[next].style.webkitTransform = "translateX(" + windowWith+"px)"; }else if (distance<=-windowWith/2 || (distance>0 && time<200)) { console.log('向左滑动成功') // 向左滑动成功 //先改变信号量 prev=idx; idx=next; next++; if(next>4){ next=0; } //添加过渡效果可省略 imageLis[idx].style.transition="all 0.4s ease 0s"; imageLis[prev].style.transition="all 0.4s ease 0s"; //改变图片的位置 imageLis[prev].style.webkitTransform = "translateX(" + (-windowWith)+"px)"; imageLis[idx].style.webkitTransform = "translateX(0px)"; }else{ //添加过渡效果可省略 imageLis[idx].style.transition="all 0.4s ease 0s"; imageLis[prev].style.transition="all 0.4s ease 0s"; imageLis[next].style.transition="all 0.4s ease 0s"; //复位图片的位置 imageLis[idx].style.webkitTransform = "translateX(0px)"; imageLis[prev].style.webkitTransform = "translateX(" + (-windowWith)+"px)"; imageLis[next].style.webkitTransform = "translateX(" + windowWith+"px)"; } } </script> </body> ``` **[Zepto](http://www.wenshuai.cn/Manual/Zepto/)**是一个轻量级的**针对现代高级浏览器的JavaScript库，**它与jquery**有着类似的api**。如果你会用jquery，那么你也会用zepto。