移動端touch事件

移動端touch事件

• 事件類型
  • 事件類型
  • 對象屬性的區別
  • 屬性參數
• 使用場景
  • 簡單的判斷滑動方向
  • 複雜的拖拽、縮放、旋轉 、長按等

當手觸摸移動設備的時候，會觸發touch事件，而觸摸事件主要有下面4大類型組成。 能夠經過檢查觸摸事件的 TouchEvent.type 屬性來肯定當前事件屬於哪一種類型。

事件類型

• touchstart：觸摸開始的時候觸發
• touchmove : 觸摸結束的時候觸發
• touchend: 手指在屏幕上滑動的時候觸發
• touchcancel：觸摸時因爲某些緣由被中斷時觸發

對象屬性

當咱們觸發事件的時候會生成一個event對象，如下是對象的屬性列表

• touches：屏幕上全部觸摸點的信息
• targetTouches：目標區域上全部觸摸點的信息
• changedTouches：當前事件觸摸點的信息

對象屬性的區別

• 第一根手指觸摸屏幕，三個事件獲取到的信息是相同的。
• 第二根手指觸摸屏幕，touches會獲取兩個觸摸點的信息，若是觸摸點是在同一個目標區域上的targetTouches也是獲取到兩個觸摸點信息，而chengedTouched只保存第二個信息點。
• 若同時兩根手指觸摸屏幕，changedTouches會保存兩個觸摸點信息。
• 第一個觸摸點和最後一個觸摸點離開的時候，只有changedTouches纔會保存離開的觸摸點信息。

從各屬性的區別來看，只有changedTouches纔會保存觸摸點信息，比較適合咱們計算一些位置，大小，目標等。

屬性參數

touch對象構成的數組，能夠用過event.touches，event.targetTouches,event.targetTouches來取到。 咱們來看下changedTouches對象下屬性參數，能夠知道當前的位置，大小，形狀，壓力大小和目標。

// 獲取event.changedTouches 輸出
{
    clientX: 603.6799926757812 // 返回觸摸點相對於瀏覽器視口左邊緣的X座標，不包括任何滾動偏移。
    clientY: 932.9600219726562 // 返回觸摸點相對於瀏覽器視口上邊緣的Y座標，不包括任何滾動偏移。
    force: 1 // 壓力大小，是從 0.0(無壓力)到 1.0(最大壓力)的浮點數
    identifier: 0 // 一次觸摸動做的惟一標識符
    pageX: 603.6799926757812 // 返回觸摸點相對於文檔左邊緣的X座標。與clientX此不一樣，此值包括水平滾動偏移
    pageY: 932.9600219726562 // 返回觸摸點相對於文檔頂部的Y座標。與clientY,此值不一樣，包括垂直滾動偏移
    radiusX: 30.053333282470703 // 返回橢圓的X半徑，該半徑最接近地限定與屏幕的接觸區域。該值的大小與像素相同screenX。
    radiusY: 30.053333282470703 //返回橢圓的Y半徑，該半徑最接近地限定與屏幕的接觸區域。該值的大小與像素相同screenY。
    rotationAngle: 0 // 它是這樣一個角度值：由radiusX 和 radiusY 描述的正方向的橢圓，須要經過順時針旋轉這個角度值，才能最精確地覆蓋住用戶和觸摸平面的接觸面
    screenX: 447 // 返回觸摸點相對於屏幕左邊緣的X座標。
    screenY: 527 // 返回觸摸點相對於屏幕上邊緣的Y座標。
    target: body // 這次觸摸事件的目標element
}
複製代碼

使用場景

簡單的判斷滑動方向

• 實現方案：用touchend最後滑動的座標減去touchstart的開始座標，X座標是正數爲向右滑動，不然向左移動，Y座標是正數爲向下移動，不然向上。

{
    let startX = '';
    let startY = '';
    let endX = '';
    let endY = '';
    
    // 判斷方向，Math.abs取絕對值比較，判斷以哪一個滑動方向爲主
    function direction(startX, endX, startY, endY) {
		return Math.abs(endX - startX) >= Math.abs(endY - startY) ? (endX - startX > 0 ? '右' : '左') : (endY - startY > 0 ?
			'下' : '上');
    }
    
    // 監聽touch觸發事件計算距離
    function touchHandle(event) {
    	let ev = event || window.event;
    	switch (ev.type) {
    		case 'touchstart':
    			// 觸摸開始的時候觸發
    			startX = ev.changedTouches[0].pageX; // 開始位置的X座標觸點
    			startY = ev.changedTouches[0].pageY; // 開始位置Y座標觸點
    			break;
    		case 'touchend':
    			// 觸摸結束的時候觸發
    			endX = ev.changedTouches[0].pageX; // 結束位置的X座標觸點
    			endY = ev.changedTouches[0].pageY; // 結束位置的Y座標觸點
    			console.log(direction(startX, endX, startX, endY));
    			break;
    	}
    }
    
    document.addEventListener('touchstart', touchHandle, false);
    document.addEventListener('touchend', touchHandle, false);
}
複製代碼

複雜的拖拽、縮放、旋轉 、長按等

• AlloyFinger - 輕巧易用的web手勢庫

// element爲須要監聽手勢的dom對象
var element = document.querySelector('body');
new AlloyFinger(element, {
	pointStart: function () {
		// 手指觸摸屏幕觸發
		console.log('手指觸摸屏幕觸發');
	},
	multipointStart: function () {
		// 一個手指以上觸摸屏幕觸發
		console.log('一個手指以上觸摸屏幕觸發');
	},
	rotate: function (evt) {
		// evt.angle表明兩個手指旋轉的角度
		console.log('旋轉的角度:' + evt.angle);
	},
	pinch: function (evt) {
		// evt.scale表明兩個手指縮放的比例
		console.log('兩個手指縮放的比例:' + evt.scale);
	},
	multipointEnd: function () {
		// 當手指離開，屏幕只剩一個手指或零個手指觸發
	},
	pressMove: function (evt) {
		// evt.deltaX和evt.deltaY表明在屏幕上移動的距離
		console.log('X軸移動的距離:' + evt.deltaX);
		console.log('Y抽移動的距離:' + evt.deltaY);
	},
	tap: function (evt) {
		// 點按觸發
		console.log('點按觸發');
	},
	doubleTap: function (evt) {
		// 雙擊屏幕觸發
		console.log('雙擊屏幕觸發');
	},
	longTap: function (evt) {
		// 長按屏幕750ms觸發
		console.log('長按屏幕750ms觸發');
	},
	swipe: function (evt) {
		// evt.direction表明滑動的方向
		console.log("滑動的方向：" + evt.direction);
	},
	singleTap: function (evt) {
		// 單擊
		console.log("單擊");
	}
});
複製代碼

• hammerjs - 支持多點觸控的手勢庫

參考

• Using Touch Events
• 觸摸事件判斷滑動方向