手機端事件 · 前端

## **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。