フェンリル

Developer's Blog

iPhone/Android/PC 対応。jQuery で書くタッチイベント

touchevent02.png

こんにちは!プロダクト企画担当の林です。
今回は、前回予告していた通り、タッチイベントについて書かせていただきます。

他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、

  1. jQuery を使っている。(jQuery Mobile は不要です)
  2. iOS / Android で動作確認済み。
  3. タッチできない PC の場合、マウスで動く。

この3点です。
こちらを実際に動作するコードにて解説します。

動作確認環境

  • タッチ環境 → iPhone / iPad / Android
  • マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera

タッチイベントについて

タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。

イベントの種類

  • touchstart : タッチしたときに発生する
  • touchmove : タッチしたまま動かしたときに発生する
  • touchend : タッチ状態から離れたときに発生する
  • touchcancel : タッチ中に電話がかかってきた場合などに発生する(通常は使わない)

位置を取得するプロパティ

タッチされている画面位置は以下のプロパティで取得することができます。

  • event.changedTouches[0].pageX : タッチされている画面位置の X 座標
  • event.changedTouches[0].pageY : タッチされている画面位置の Y 座標

changedTouches の [0] を [1] にするとマルチタッチの2本目の指の位置を取得できたりします。
通常アプリでもない限り、マルチタッチは使用しないので今回は扱いません。

マウスの場合

マウスの場合は、以下のイベントでタッチイベントの代役に使います。

  • mousedown : マウスボタンを押し込んだときに発生する(touchstart の代役)
  • mousemove : マウスボタンを押しながらドラッグしたときに発生する(touchmove の代役)
  • mouseup : マウスボタンを離したときに発生する(touchend の代役)

マウスがある位置は以下のプロパティで取得することができます。

  • event.pageX : マウスがある位置の X 座標
  • event.pageY : マウスがある位置の Y 座標

各イベントの使い方

タッチイベントとマウスイベントをそれぞれコードで紹介します。

touchstart イベント

touchevent_01.png

<script type="text/javascript">
/* タッチの開始時のイベント */
$('#hoge').bind('touchstart', function() {
	event.preventDefault();						// ページが動いたり、反応を止める(A タグなど)
	this.pageX = event.changedTouches[0].pageX;	// X 座標の位置
	this.pageY = event.changedTouches[0].pageY;	// Y 座標の位置
});
</script>
    

touchmove イベント

touchevent_02.png

<script type="text/javascript">
/* タッチしたまま動かしたときのイベント */
$('#hoge').bind('touchmove', function() {
	event.preventDefault();						// ページが動くのを止める
	this.pageX = event.changedTouches[0].pageX;	// X 座標の位置
	this.pageY = event.changedTouches[0].pageY;	// Y 座標の位置
});
</script>
    

ここはたくさん呼ばれるので重い処理を書かないように気をつけましょう。
また、指を動かさなければ呼ばれない場合があります。忘れないように。

touchend イベント

touchevent_03.png

<script type="text/javascript">
/* タッチ状態から離れたときのイベント */
$('#hoge').bind('touchend', function() {
	/* 終了処理が必要ならここに書く */
	/* このイベントは、位置を取得できないので注意 */
});
</script>
    

pageX, pageY が取得できないので touchstart/touchmove で変数などに格納し、それを使いましょう。

mousedown イベント(touchstart の代役)

touchevent_04.png

<script type="text/javascript">
/* マウスボタンを押し込んだときのイベント */
$('#hoge').bind('mousedown', function() {
	event.preventDefault();		// ページの反応を止める(A タグや画像の反応など)
	this.pageX = event.pageX;	// X 座標の位置
	this.pageY = event.pageY;	// Y 座標の位置
});
</script>
    

mousemove イベント(touchmove の代役)

touchevent_05.png

<script type="text/javascript">
/* マウスボタンを押しながらドラッグしたときのイベント */
$('#hoge').bind('mousemove', function() {
	this.pageX = event.pageX;	// X 座標の位置
	this.pageY = event.pageY;	// Y 座標の位置
});
</script>
    

ここもたくさん呼ばれるので重い処理を書かないように気をつけましょう。
また、マウスを動かさなければ呼ばれない場合があります。忘れないように。

mouseup イベント(touchend の代役)

touchevent_06.png

<script type="text/javascript">
/* マウスボタンを離したときのイベント */
$('#hoge').bind('mouseup', function() {
	this.pageX = event.pageX;	// X 座標の位置
	this.pageY = event.pageY;	// Y 座標の位置
});
</script>
    

実践

Touch Me !!

タッチイベントとマウスイベントをミックスして、画像をタッチで動かす処理を書いてみました。
↑の画像は実際に以下のコードで動くサンプルです。
(iPhone/iPad/Android/PC 全対応です)

動かすオブジェクトの HTML コード

スクリプトコード


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">

/* タッチできる環境なら true、そうでないなら false 。
   ここで先に判別しておきます。 */
var isTouch = ('ontouchstart' in window);

/* hoge のイベントを jQuery.bind で捕獲します。 */
$('#hoge').bind({
				
	/* タッチの開始、マウスボタンを押したとき */
	'touchstart mousedown': function(e) {
		// ページが動いたり、反応を止める
		e.preventDefault();
		
		// 開始位置 X,Y 座標を覚えておく
		// (touchmove イベントを通らず終了したときのために必ず覚えておくこと)
		this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
		this.pageY = (isTouch ? event.changedTouches[0].pageY : e.pageY);

		// 現在の hoge の場所を覚えておく
		this.left = $(this).position().left;
		this.top = $(this).position().top;
		
		// タッチ処理を開始したフラグをたてる
		this.touched = true;
	},
	/* タッチしながら移動、マウスのドラッグ */
	'touchmove mousemove': function(e) {
		
		// 開始していない場合は動かないようにする
		// 過剰動作の防止
		if (!this.touched) {
			return;
		}
		
		// ページが動くのを止める
		e.preventDefault();
		
		// 移動先の hoge の位置を取得する
		this.left = this.left - (this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX) );
		this.top = this.top - (this.pageY - (isTouch ? event.changedTouches[0].pageY : e.pageY) );

		// hoge を移動させる
		$(this).css({left:this.left, top:this.top});
		
		// 位置 X,Y 座標を覚えておく
		this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
		this.pageY = (isTouch ? event.changedTouches[0].pageY : e.pageY);
	},
	/* タッチの終了、マウスのドラッグの終了 */
	'touchend mouseup': function(e) {
		if (!this.touched) {
			return;
		}
		
		// タッチ処理は終了したため、フラグをたたむ
		this.touched = false;
        
        // 必要なら以下で最終の hoge の位置を取得し何かに使う
        // this.pageX
        // this.pageY
	}
});
</script>
    

以上が、マルチプラットフォーム対応のタッチ・マウスイベント共通の処理の書き方です。
もっと効率良い方法がたくさんあると思いますが、参考になればと思います。

おまけ:シンプルなコピペ用スクリプトコード

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
var isTouch = ('ontouchstart' in window);
$('#hoge').bind({
	'touchstart mousedown': function(e) {
		e.preventDefault();
		this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
		this.pageY = (isTouch ? event.changedTouches[0].pageY : e.pageY);
	},
	'touchmove mousemove': function(e) {
		e.preventDefault();
	},
	'touchend mouseup': function(e) {
	}
});
</script>
    




Facebook コメント

コメント

アマゾンキャンペーン2011年06月11日 22:08

これは便利ですね!

2011年06月13日 17:18

> アマゾンキャンペーン さん
ありがとうございます!
PC でのデバッグ用途を含めて、どちらでも動くように作った方が良いので簡単なものですが紹介させていただきました。

pospos2012年01月19日 15:33

はじめまして。

HTMLコード、スクリプトコードを完全コピペで動くかと思ったんですが、動きませんでした。

う~ん。

pospos2012年01月19日 16:45

自己解決できました!
動きました!

zanmai.net2013年03月27日 13:28

参考になりました。

スマホでフリックとかループとか色々カスタマイズできるスライダー作ってやんよ!!!(前編) | ときどきWEB2013年06月24日 7:44

[...] タッチイベントの取得や基本的な使い方などは『Developer’s Blog』様のこちらのエントリーを参考にさせていただきました。大変勉強になりましたm(_ _)m [...]

スマホでフリックとかループとか色々カスタマイズできるスライダー作ってやんよ!!!(前編) | ときどきWEB2013年06月25日 2:07

[...] タッチイベントの取得や基本的な使い方などは『Developer’s Blog』様のこちらのエントリーを参考にさせていただきました。大変勉強になりましたm(_ _)m [...]

スマホでフリックとかループとか色々カスタマイズできるスライダー作ってやんよ!!!(前編) | ときどきWEB2013年10月11日 1:01

[…] タッチイベントの取得や基本的な使い方などは『Developer’s Blog』様のこちらのエントリーを参考にさせていただきました。大変勉強になりましたm(_ _)m […]

永友2013年10月18日 22:03

タッチ・マウスイベント共通の処理の書き方は大変参考になりました

できましたら、次の疑問を解決する方法をご教授ください
#hogeの範囲にonClickを含む場合にonClickにコントロールが渡らない
サンプルはURLに!!

今週 September 1st | blog from cdbk2014年09月02日 5:01

[…] Shared iPhone/Android/PC 対応。jQuery で書くタッチイベント. iPhone/Android/PC 対応。jQuery で書くタッチイベント […]

ユガラボ2014年11月28日 20:32

[…] Developer’s Blog | iPhone/Android/PC 対応。jQuery で書くタッチイベント 以上です!拙い部分もあるやもしれませんが、ご容赦ください。 […]

Androidブラウザでフリックを実装する時の注意 | LOCK,STOCK & SMOKING BARRELS/一切合切2014年12月11日 13:08

[…] iPhone/Android/PC 対応。jQuery で書くタッチイベント […]

スワイプ処理を実装してみる | cly7796.net2015年02月26日 21:51

[…] スマートフォン向けにスワイプ処理を実装する機会があったのでメモ。こちらの記事を参考にさせていただきました。 […]

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。