標籤：
現在智能手機火爆了，我們都是觸控螢幕事的，那麼我們以前js寫法是無法滿足一些要求了，下面我來給大家介紹幾個JS手機觸控螢幕的事件用法處理Touch事件能讓你跟蹤使用者的每一根手指的位置。你可以綁定以下四種Touch事件：
一、
touchstart:// 手指放到螢幕上的時候觸發
touchmove:// 手指在螢幕上移動的時候觸發
touchend:// 手指從螢幕上拿起的時候觸發
touchcancel:// 系統取消touch事件的時候觸發。至於系統什麼時候會取消，不詳
二、
client / clientY：// 觸摸點相對於瀏覽器視窗viewport的位置
pageX / pageY：// 觸摸點相對於頁面的位置
screenX /screenY：// 觸摸點相對於螢幕的位置
identifier：>// touch對象的unique ID
三，
每個Touch對象包含下列屬性。
clientX:觸摸目標在視口中的X座標。
clientY:觸摸目標在視口中的Y座標。
identifier：表示觸摸的唯一ID。
pageX：觸摸目標在頁面中的x座標。
pageY：觸摸目標在頁面中的y座標。
screenX:觸摸目標在螢幕中的x座標。
screenY:觸摸目標在螢幕中的y座標。
target:觸摸的DOM節點座標。
例
| 代碼如下 | 複製代碼 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>touches</title> <style> body{ font-size:60px; color:red;} </style> <script> function touches(ev){ if(ev.touches.length==1){ var oDiv=document.getElementById(‘div1‘); switch(ev.type){ case ‘touchstart‘: oDiv.innerHTML=‘Touch start(‘+ev.touches[0].clientX+‘, ‘+ev.touches[0].clientY+‘)‘; ev.preventDefault(); //阻止出現捲軸 break; case ‘touchend‘: oDiv.innerHTML=‘Touch end(‘+ev.changedTouches[0].clientX+‘, ‘+ev.changedTouches[0].clientY+‘)‘; break; case ‘touchmove‘: oDiv.innerHTML=‘Touch move(‘+ev.changedTouches[0].clientX+‘, ‘+ev.changedTouches[0].clientY+‘)‘; break; } } } document.addEventListener(‘touchstart‘,touches,false); document.addEventListener(‘touchend‘,touches,false); document.addEventListener(‘touchmove‘,touches,false); </script> </head> <body> <div id="div1"></div> </body> </html> |
|
二、手勢事件：
gesturestart: 當一個手指按在螢幕上，另一個手指有觸發螢幕時，觸發；
gestureend: 當你的任何一個手指從螢幕上移開的時候，觸發；
gesturechange: 當觸控螢幕幕的任何一個手指發生變化的時候，觸發；
在事件對象這裡，其他的都還一樣，在手勢這裡多了兩個很有用的東西：
一個是rotation: 手指變化引起的旋轉角度，順時針為正的，逆時針為負的；
還有一個scale: 兩個手指之間的距離變化；
例
| 代碼如下 | 複製代碼 |
| <!doctype html> <html> <head> <meta charset="utf-8"> <title>gesture</title> <style> body{ font-size:60px; color:red;} </style> <script> window.onload=function(){ function gesture(ev){ var div=document.getElementById(‘div1‘); switch(ev.type){ case ‘gesturestart‘: div.innerHTML=‘Gesture start (rotation=‘+ev.rotation+‘, scale=‘+ev.scale+‘)‘; ev.preventDefault(); break; case ‘gestureend‘: div.innerHTML=‘Gesture End (rotation=‘+ev.rotation+‘, scale=‘+ev.scale+‘)‘; break; case ‘gesturechange‘: div.innerHTML=‘Gesture Change (rotation=‘+ev.rotation+‘, scale=‘+ev.scale+‘)‘; break; } } document.addEventListener(‘gesturestart‘,gesture,false); document.addEventListener(‘gestureend‘,gesture,false); document.addEventListener(‘gesturechange‘,gesture,false); } </script> </head> <body> <div id="div1"></div> </body> </html> |
|
移動觸摸事件之二
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
