移动web——touch事件介绍
基本概念
1、在移動web端點擊事件或者滑動屏幕、捏合等動作都是由touchstar、touchmove、touchend這三個事件組合在一起使用的
2、click事件在移動端會有0.2秒的延遲，下面是測試click在移動web端的延遲，最好在手機瀏覽器中測試
<script>window.onload = function () {var currentTime = 0;document.body.addEventListener('click', function (ev) {console.log(Date.now() - currentTime);})document.body.addEventListener('touchstart', function (ev) {currentTime = Date.now();});} </script>3、touchstar、touchmove、touchend這三個事件我們關注的是里面的touches屬性，這是一個數組，里面有鼠標clientX與clinetY屬性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Title</title><style>html, body {height: 100%;background-color: pink;}</style> </head> <body> <script>window.onload = function () {document.body.addEventListener('touchstart', function (ev) {console.log(ev);});document.body.addEventListener('touchmove', function (ev) {console.log(ev);});document.body.addEventListener('touchend', function (ev) {console.log(ev);})} </script> </body> </html>touchstart：touches中有長度為1的數組，touches[0]中clientX，clientY是有值的
touchmove：touches中有長度為1的數組，touches[0]中clientX，clientY是有值的，而且不斷在變化
touchend：touches中有長度為0的數組，因為我們只是一個鼠標在點擊，鼠標彈起的時候touches是不會存儲值的
點擊事件
既然click有延遲，那么我們就用touch的三個事件來代替click事件，只要滿足下面幾種情況，我們就能夠說明這次動作是點擊事件，而不是長按屏幕或者滑動屏幕
1、touchstart與touchend觸發的事件大于250就證明這不是點擊事件
2、touchmove事件在這次動作中被觸發就證明這不是點擊事件
3、下面是封裝的一個toush事件模仿點擊事件，需要注意的是回調函數的參數，它的實參是在函數中被傳入的
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Title</title><style>html, body {height: 100%;background-color: pink;}</style> </head> <body> <script>var ele = document.querySelector('body');fox_tap(ele, function (e) {console.log('點擊');console.log(e);});/*element：綁定的dom元素callback：回調函數*/function fox_tap(element, callback) {var statTime = 0;var isMove = false;var maxTime = 250;var event = null;element.addEventListener('touchstart', function (e) {statTime = Date.now();/*每次執行注冊事件都要初始化此值，因為touchmove事件觸發的時候會更改isMove的值，不更改，下次再進入touchtend事件會沿用上次touchmove修改過的isMove的值，這樣就一直終端函數*/isMove = false;event = e;});element.addEventListener('touchmove', function (e) {isMove = true;});element.addEventListener('touchend', function (e) {if (isMove == true) {return;}if ((Date.now() - statTime) > maxTime) {return;}callback(event);});} </script> </body> </html>?
轉載于:https://www.cnblogs.com/wuqiuxue/p/8242058.html
總結
以上是生活随笔為你收集整理的移动web——touch事件介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 输入身份证自动回填地址,年龄,个人详细信
- 下一篇： 账龄分析表excel模板_优秀财务的Ex