• HOME
  • BLOG
  • HTML5
  • touchmove の event.scale が undefined な環境についての対応

touchmove の event.scale が undefined な環境についての対応

touch デバイスの touchmove イベントハンドリングで、
タッチ数が複数だった場合 渡ってくる event Object の scale プロパティについて。

そのevent.scale が undefined、な環境があるよねの対応。
まぁ、その、Androidなわけなんだけど。
iOSは正しく渡ってくる。

event.scale は挙動をみると、
touchstart 時の タッチ2点間の距離を1とした時
touchmove 中のその変化が、touchstart 時のその量比、
何倍になっているかっ?てのが計算されているよう。

ということで、渡ってこない環境では自前で計算してあげて対応。

{対象物}.addEventListener("touchstart", touchstart_handler);
document.addEventListener("touchmove", touchmove_handler);

var start_distance = null;//タッチ開始時の2点間距離保存変数

//
//タッチ開始ハンドラ
function touchstart_handler(e){

	//
	// マルチタッチで e.scale が空に場合のみ処理
	if (e.touches.length > 1 && e.scale == undefined ) {
	
		var _x = e.touches[0].pageX - e.touches[1].pageX;
		var _y = e.touches[0].pageY - e.touches[1].pageY;
		start_distance = Math.sqrt(Math.pow(_x,2) + Math.pow(_y,2));
	
	}

};

//
//タッチ中ハンドラ
function touchmove_handler(e){

	//
	// マルチタッチで e.scale が空に場合のみ処理
	if (e.touches.length > 1 && e.scale == undefined && start_distance != null) {
	
		var _x = e.touches[0].pageX - e.touches[1].pageX;
		var _y = e.touches[0].pageY - e.touches[1].pageY;
		
		//
		//タッチ開始時の2点間距離と現在の2点間距離を用いて拡大縮小率を計算
		e.scale = Math.sqrt(Math.pow(_x,2) + Math.pow(_y,2)) / start_distance;
	
	}
	
	//
	//結果を出力
	console.log(e.scale);
	
};