タブレット端末でフリック入力

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

戻る

フリックの処理について、こちらのサイトを参考にしました。→たった1.2人の独立戦争記

イベントハンドラの処理をなくし、オブジェクトから直接イベントが発生するように手順を変更しています。
これによって、動的に生成したオブジェクト上でフリックをすると、そのオブジェクトを消すという操作ができるようになりました。touchEnd()に引数を使うことも可能です。

実例

ここをフリックします

例文

<span onTouchStart="touchStart()" onTouchMove="touchMove()" onTouchEnd="touchEnd()">ここをフリックします</span>
<input type="button" onTouchStart="touchStart()" onTouchMove="touchMove()" onTouchEnd="touchEnd()" value="ここをフリックします">

<script type="text/javascript">
//フリック開始位置の取得
function touchStart() {
	startX = null;
	startX = event.pageX;
}

//フリック途中位置の取得
function touchMove() {
	endX = null;
	endX = event.pageX;
}

//フリック終了時の処理
function touchEnd() {
	if(startX != null && endX != null) {
		//移動量
		var diff = endX - startX;
		if(Math.abs(diff) >= 50) {
			//フリック後の処理
			alert("フリック時の移動量 : " + diff);
		}

		startX = null;
		endX = null;
	}
}
</script>

解説

タブレット用のイベント、onTouchStart、onTouchMove、onTouchEndを使っています。

タッチするとその時点のX座標を取得します。
フリックをすると最後のX座標を取得します。
タッチが終わると、最初と最後のX座標を比較して移動量からフリックだったと認識して事後処理をします。

変数diffがプラスなら右方向、マイナスなら左方向へのフリックとなります。

戻る