【jQuery】コピペOK！タッチ操作とマウス操作の動作定義をまとめる

まず、こちらがサンプルボタンです！PCでもスマホでも共通のコードで動作するところがポイントです！
基本のクリック動作、押下、移動、キャンセルの４種を定義できます。

サンプルコードです！
動作定義部分と、jQuery拡張部分の二つに分けてご紹介します。

まずは、動作定義部分です。
上に置いてあるボタンは、こちらのコードで動作しています。

$(function(){
	$('#hoge').touchInterface(
	function(e,$_this){ //タッチorクリックの動作
		$_this.empty().append('action:up/end');
		$_this.css('background-color','#FFF');
	},
	function(e,$_this){ //(オプション)押下
		$_this.empty().append('action:down/start');
		$_this.css('background-color','#AAF');
	},
	function(e,$_this){ //(オプション)移動
		$_this.empty().append('action:move');
		$_this.css('background-color','#AFA');
	},
	function(e,$_this){ //(オプション)範囲外
		$_this.empty().append('action:out/cancel');
		$_this.css('background-color','#FFA');
	}
	);
});

はい、わりとシンプルな作りですね！
jQueryエレメントの挙動を拡張して”touchInterface”というアクションを命令し、
その引数として関数を４つ渡しています。
まとめるとこんな感じです。

関数内では、 $(this) という表記が使えない為、代わりに $_this を使用して下さい。
また、タッチ位置などを使いたい場合は、e の中から引っ張って下さい。

続いて、肝心のjQuery拡張部分です。
jQueryの機能を拡張して、「touchInterface」というアクションを定義しています。

$.fn.extend({
	touchInterface : function(up){
		var down	= (arguments.length > 1 ) ? arguments[1] : false;
		var move	= (arguments.length > 2 ) ? arguments[2] : false;
		var cancel	= (arguments.length > 3 ) ? arguments[3] : false;
		return $(this).on({
			'touchstart mousedown'	: function(e){
				e.preventDefault();
				this.touching = true;
				if(down)down(e,$(this));
			},
			'touchmove mousemove'	: function(e) {
			 	if(!this.touching)return;
				e.preventDefault();
				if(move)move(e,$(this));
				if('ontouchstart' in window){
					var touch = e.originalEvent.changedTouches[0];
					var offset = $(this).offset();
					if(	touch.pageX < offset.left || touch.pageX > $(this).outerWidth()  + offset.left ||
						touch.pageY < offset.top  || touch.pageY > $(this).outerHeight() + offset.top  ){
						this.touching = false;
						if(cancel)cancel(e,$(this));
					}
				}
			},
			'touchcancel mouseout'	: function(e){
				if(!this.touching)return;
				e.preventDefault();
				if(cancel)cancel(e,$(this));
				this.touching = false;
			},
			'touchend mouseup'		: function(e){
				if(!this.touching)return;
				e.preventDefault();
				up(e,$(this));
				this.touching = false;
			}
		}).css('cursor','pointer');
	}
});

上記のjQuery拡張部分のコードは、JavaScriptソース内のjQuery動作定義部分の外側に記述してください。
もちろんjQuery本体も忘れずに読み込んでくださいね！

拡張部分のポイントは、タッチ系のイベントとマウス系のイベント両方に対して同じイベントをバインドしているところです。
また、オブジェクトに対してタッチした後、タッチ移動した際にタッチ位置がオブジェクトの外に出た場合、 PCではmouseoutが呼ばれるのに対し、スマートフォンでは対応するイベントがありません。
そこで、挙動を統一する為に、タッチ操作のときのmoveイベント内で、オブジェクトの外に出ていないか判定する処理を設けています。

さらに詳しくは、デモページを用意いたしましたので、併せてご覧ください。
デモページのソースにはコメントも併記しています。

>> demo page
今回のコードを書くにあたり、こちらの記事を参考にさせていただきました！
Developer’s Blog | iPhone/Android/PC 対応。jQuery で書くタッチイベント
以上です！拙い部分もあるやもしれませんが、ご容赦ください。