標籤：art ack touch start clientx bsp lan sele list
基本概念
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觸發的事件大於200就證明這不是點擊事件
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>
移動web——touch事件
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
