一開始做前端頁面的時候，接觸的也是js，但是隨後便被簡單高效的jquery吸引過去，並一直使用至今。而js，則被我主觀的認為底層技術而拋棄。直到這幾天工作需要，研究移動端頁面的觸屏滑動事件，搜索jquery 的相應技術支持實在繁瑣（當然也可能是我對jquery的理解不夠），而js只需幾步簡單定義即可 ...
一開始做前端頁面的時候，接觸的也是js，但是隨後便被簡單高效的jquery吸引過去，並一直使用至今。
而js，則被我主觀的認為底層技術而拋棄。
直到這幾天工作需要，研究移動端頁面的觸屏滑動事件，搜索jquery 的相應技術支持實在繁瑣（當然也可能是我對jquery的理解不夠），而js只需幾步簡單定義即可。
由於對js的瞭解比較少，最簡單的應用我都試了很久……下麵就分享下js的touch事件的實際應用：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>js的touch事件的實際應用_何問起</title> <base target="_blank" /> <meta charset="utf-8" /> <style> a{color:blue;} </style> </head> <body> <div> 請在手機等觸屏設備訪問本頁，然後拖動本頁。拖動本頁會彈出對話框。 <br /> <a href="http://hovertree.com">何問起</a> <a href="http://hovertree.com/menu/texiao/">網頁特效</a> <a href="http://hovertree.com/h/bjaf/iw48pw0n.htm">代碼說明</a> <br /> <img src="http://hovertree.com/hvtimg/bjafjf/q4joew9u.png" alt="二維碼" /> </div> <script src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js"></script> <script> $(function () { document.addEventListener("touchmove", _touch, false); }) function _touch(event) { alert("何問起"); }</script> </body> </html>
效果展示 http://hovertree.com/texiao/mobile/11/
手機掃描下麵二維碼體驗效果：
以上代碼不可避免的使用了jquery的某些東西，不使用jquery的可以忽略之。
相應的事件有：
touchstart:當手指觸摸屏幕時觸發；即使已經有一個手指放在了屏幕上也會觸發。
touchmove:當手指在屏幕上滑動時連續的觸發。在這個事件發生期間，調用preventDefault()可阻止滾動。
touchend:當手指從屏幕上移開時觸發。
touchcancel:當系統停止跟蹤觸摸時觸發。關於此事件的確切觸發事件，文檔中沒有明確說明。
以上事件的event對象上面都存在如下屬性：
touches:表示當前跟蹤的觸摸操作的Touch對象的數組。
targetTouches:特定於事件目標的Touch對象的數組。
changeTouches:表示自上次觸摸以來發生了什麼改變的Touch對象的數組。
每個Touch對象包含下列屬性：
clientX:觸摸目標在視口中的X坐標。
clientY:觸摸目標在視口中的Y坐標。
identifier：表示觸摸的唯一ID。
pageX：觸摸目標在頁面中的x坐標。
pageY：觸摸目標在頁面中的y坐標。
screenX:觸摸目標在屏幕中的x坐標。
screenY:觸摸目標在屏幕中的y坐標。
target:觸摸的DOM節點坐標
http://hovertree.com/h/bjaf/iw48pw0n.htm
推薦：http://hovertree.com/h/bjaf/vvxsmuh4.htm
網頁特效：http://www.cnblogs.com/roucheng/p/texiao.html
