Touch オブジェクトの注意点

jp.ferv.blog » Blog Archive » iOS Safari Examples の補足

Touch オブジェクトの参照を保存した場合

touchmove イベントで Touch オブジェクトの参照を変数に格納してしまうと、 次の touchmove イベントで格納していた Touch オブジェクトのプロパティが上書きされてしまい位置の差分を計算することができません。
  • JavaScript
  • TouchEventExample0.js
  • Source
var TouchEventExample0 = (function()
{
	var _viewport, _prevTouch;
	
	window.addEventListener("load", _onLoadWindow);
	
	function _onLoadWindow(e)
	{
		window.removeEventListener("load", _onLoadWindow);
		
		_viewport = document.getElementById("viewport");
		_viewport.addEventListener("touchmove", _onTouchMove);
	}
	
	function _onTouchMove(e)
	{
		e.preventDefault();
		
		var touch = e.touches[0];
		if (_prevTouch)
			console.log([_prevTouch == touch, '(' + _prevTouch.pageX.toString(), _prevTouch.pageY.toString() + ')', '(' + touch.pageX.toString(), touch.pageY.toString() + ')']);
		_prevTouch = touch;
	}
})();
  1. var TouchEventExample0 = (function()
  2. {
  3.     var _viewport, _prevTouch;
  4.    
  5.     window.addEventListener("load", _onLoadWindow);
  6.    
  7.     function _onLoadWindow(e)
  8.     {
  9.         window.removeEventListener("load", _onLoadWindow);
  10.        
  11.         _viewport = document.getElementById("viewport");
  12.         _viewport.addEventListener("touchmove", _onTouchMove);
  13.     }
  14.    
  15.     function _onTouchMove(e)
  16.     {
  17.         e.preventDefault();
  18.        
  19.         var touch = e.touches[0];
  20.         if (_prevTouch)
  21.             console.log([_prevTouch == touch, '(' + _prevTouch.pageX.toString(), _prevTouch.pageY.toString() + ')', '(' + touch.pageX.toString(), touch.pageY.toString() + ')']);
  22.         _prevTouch = touch;
  23.     }
  24. })();

:::OUTPUT:::
true,(120,262),(120,262)
true,(138,244),(138,244)
true,(156,226),(156,226)
true,(176,204),(176,204)
true,(192,184),(192,184)

Touch オブジェクトのプロパティの値を保存した場合

内部的に Touch オブジェクトのプロパティを書き換えつつ使いまわしてるぽいから、 Touch オブジェクトの参照ではなく Touch オブジェクトのとっておきたいプロパティの値を変数に格納するようにします。

  • JavaScript
  • TouchEventExample1.js
  • Source
var TouchEventExample1 = (function()
{
	var _viewport, _prevPoint;
	
	window.addEventListener("load", _onLoadWindow);
	
	function _onLoadWindow(e)
	{
		window.removeEventListener("load", _onLoadWindow);
		
		_viewport = document.getElementById("viewport");
		_viewport.addEventListener("touchmove", _onTouchMove);
	}
	
	function _onTouchMove(e)
	{
		e.preventDefault();
		
		var point = {
			x: e.touches[0].pageX,
			y: e.touches[0].pageY
		};
		if (_prevPoint)
			console.log([_prevPoint == point, '(' + _prevPoint.x.toString(), _prevPoint.y.toString() + ')', '(' + point.x.toString(), point.y.toString() + ')']);
		_prevPoint = point;
	}
})();
  1. var TouchEventExample1 = (function()
  2. {
  3.     var _viewport, _prevPoint;
  4.    
  5.     window.addEventListener("load", _onLoadWindow);
  6.    
  7.     function _onLoadWindow(e)
  8.     {
  9.         window.removeEventListener("load", _onLoadWindow);
  10.        
  11.         _viewport = document.getElementById("viewport");
  12.         _viewport.addEventListener("touchmove", _onTouchMove);
  13.     }
  14.    
  15.     function _onTouchMove(e)
  16.     {
  17.         e.preventDefault();
  18.        
  19.         var point = {
  20.             x: e.touches[0].pageX,
  21.             y: e.touches[0].pageY
  22.         };
  23.         if (_prevPoint)
  24.             console.log([_prevPoint == point, '(' + _prevPoint.x.toString(), _prevPoint.y.toString() + ')', '(' + point.x.toString(), point.y.toString() + ')']);
  25.         _prevPoint = point;
  26.     }
  27. })();

:::OUTPUT:::
false,(142,428),(146,416)
false,(146,416),(154,400)
false,(154,400),(164,382)
false,(164,382),(176,356)
false,(176,356),(186,332)

このようにして、前回位置との比較とか差分とかを計算します。

About this entry

You’re currently reading “Touch オブジェクトの注意点,” an entry on jp.ferv.blog

Published:
Tue, Aug 10th, 2010 at 2:28 PM
Author:
dsk
Category:
Web
Tags:
, ,