蒼天家 本家
JS - 手機裝置偵測位移 2017-01-10
對於行動裝置而言
傳統的$(document).mousemove(function(e){ ... e.pageX .... e.pageY });
是完全無法使用的.

有四個屬於行動裝置專用的觸控語法
touchstart:點下去觸發的事件
touchmove:點下去後不放在螢幕上移動觸發的事件
touchend:從螢幕上放開觸發的事件
touchcancel:當觸控點超過螢幕可支援的數量時觸發的事件
這些事件支援一個以上的觸控點(視裝置支援最大觸控點而定)
假設我想要偵測我的第一個觸控點的X,Y位移量 var touch_track = document.getElementById("元素");

var touchesX = [ ], touchY = [ ];
var posXstart, posXrange, posXnow = 0; // X軸的起始位置,X軸的滑動範圍,X軸的現在位置
var posYstart, posYrange, posYnow = 0; // X軸的起始位置,X軸的滑動範圍,X軸的現在位置

touch_track.addEventListener("touchstart", function (e) { //紀錄下觸控的事件
event.preventDefault(); //預防原先的事件觸發
touchesX = e.touches;
touchesY = e.touches;
posXstart = touchesX[0].pageX; //touches[0]為第一個所下的觸控點
posYstart = touchesY[0].pageY; //touches[0]為第一個所下的觸控點
},false);

touch_track.addEventListener("touchmove", function (e) { //紀錄移動的事件
event.preventDefault();
touchesX = e.touches;
touchesY = e.touches;

posXrange = -(parseInt(touchesX[0].pageX - posXstart)); //touches[0]X軸移動的距離
posXnow = posXnow + posXrange; //上一個位置與移動距離為新的X座標位置
posYrange = -(parseInt(touchesY[0].pageY - posYstart)); //touches[0]Y軸移動的距離
posYnow = posYnow + posYrange; //上一個位置與移動距離為新的Y座標位置
},false);

觸控點為
touchesX[0] -touchesX[n],
這也是最初宣告touches 為陣列的原因.

另外有部分瀏覽器會有觸控滑動與Scroll的事件衝突,
因此建議用event.preventDefault();取消掉原始事件.

要偵測多個點之間的距離:var 變數 = touch.length;
關於我

隨手用部落格

紀錄平時學習用到的東西

考慮想重改版

Github 自學倉庫

我的 Github 帳號

PHP開發

公司: 原生PHP

個人: Slim -> Flight

關聯文章
CORS的簡單跨域實作(PHP + jQuery)
優化MySQL的在innodb資料效能
PHP , JS - 雙方json資料溝通方式.
PHP - is_dir_檢查資料夾是否存在
PHP - 圖片縮小與放大
PHP 處理圖片旋轉問題
PHP - 檔案上傳環境設定
PHP - 檔案函數相關操作
PHP - 檔案上傳
PHP - Session設定
PHP - Cookie的設定
PHP - addslashes_反斜線,單引號,雙引號寫入資料庫
PHP - nl2br_輸入文字時按enter時自動加入<br>換行
PHP - strip_tags_html 標籤轉換純字元
PHP - PHP_EOL 解決各平台換行記號不統一問題
PHP - 前端大量值傳至後端方式
PHP - implode_explode 單一變數分解成陣列 / 陣列組合成單一變數
PHP - 查詢MySQL上Table的資訊(AUTO_INCREMENT)
PHP - mysqli 欄位相關
PHP - mysqli 資料撈取
PHP - mysqli 資料庫的使用
PHP - 引用外部的資料
PHP與前端(JS,HTML)相互傳值的方法
MySQL - 使用正規化
MySQL - 資料表的建立
MySQL - 資料庫簡單的計算
MySQL - 基礎語法
CSS - DIV / TD內部將圖片完全置中
CSS - overflow超過時處理方式
CSS - 左右文字平均對齊
HTML - 手機的顯示尺寸(RWD整理一篇文章)
HTML - 智慧型手機啟動app的網址
HTML - 預先讀取頁面或是資料的方式
JS - 手機裝置偵測位移
JS - 手機裝置轉址至手機版本介面
JS、PHP - if...else...精簡用法
JS - 文字取代與全部取代
JS - 偵測鍵盤事件方法
JS - 數值取樣
JS - 轉址與重新載入的語法
JS - 陣列變呼叫與存取的方式
jQuery Plugins - 透過timer.js來實現自動計時連續處理特定動作行為
jQuery Plugins - 透過jQuery form來實現上傳圖片不刷頁
jQuery - inArray找尋陣列符合值得方法
jQuery - 動態特效(animate與fade)相關
jQuery - 目前畫面卷軸位置、物件相對/絕對位置
jQuery - 滑鼠滑入滑出與hover用法
jQuery - focus/blur 焦點.失去焦點用法
JS、PHP - 轉頁方法
JS - 倒數功能
jQuery - 偵測目前的位移
jQuery - 偵測元素內的值是否有異動
jQuery - 僅執行一次one
jQuery - 事件綁定bind / live / delegate /on
jQuery - 操作子元素取得父元素屬性(.parent)
jQuery - 透過proxy將其它物件帶入特定function
回首頁