HTML5プログラミング -タッチ操作を取得する-

◇HTML5プログラミング -タッチ操作を取得する-

通常の JavaScriptを使用すると，タッチとマウスの命令が違ったり，画面外がタッチできたりと，色々不具合があります
canvasクラスのイベントを使用すれば，この辺の問題は無くなります

onmousedownメソッドをオーバーライドします

↓コレを書いた後に，

	canvas=document.getElementById("karunaCanvas")

↓コレを書く

	canvas.onmousedown=mDown;
	function mDown(e){
		//タッチした時に実行される
		rSina(0);
	}

タッチすると，mDown関数にコールバックが飛びます

この関数内に渡された引数で，色々な情報を取得できます
e.clientX; //タッチしたＸ座標
e.clientY; //タッチしたＹ座標

getElementByIdした領域内だけで有効です
画面がスクロールされていたとしても，同じ値が返って来ます（のはず）

iPodで onmousedownイベントを使用すると，恐ろしく反応が悪い
これとは別にタッチ専用イベント ontouchstartがあり，こちらは反応が良い
しかし，そのまま書いたのでは色々と具合が悪かったので，試行錯誤した

・届く変数が異なる
onmousedownイベントは，引数に届く
ontouchstartイベントは，グローバル変数 eventに届く

・引数の数が異なる
onmousedownイベントは，１つだけ
ontouchstartイベントは，タッチした指の本数届く

・タッチすると両方反応することがある
処理後に return false;すると，片方だけになるっぽい

これらを加味して，共有処理を書くと，こうなる('-'*)

	canvas.onmousedown=function(e){
		mDown(e)
		e.preventDefault();
		return false;
	}

	canvas.ontouchstart=function(){
		e=event.touches[0];
		//１本目の指だけ処理する

		mDown(e)
		event.preventDefault();
		return false;
	}

	function mDown(e){
		//ここに共通処理
		//e.clientX，e.clientYで位置を取得したりとか
	}

○TOP○プログラマ専用○HTML5プログラミング○