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


$.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({					//jQueryオブジェクトを以下の動作をバインドした上で返す
			'touchstart mousedown'	: function(e){	//タッチ開始 or マウスダウンの動作
				e.preventDefault();			//デフォルトの動作を止める
				this.touching = true;		//このオブジェクトへタッチorクリックが行われた
				if(down)down(e,$(this));	//第二引数として渡した処理を実行する(引数が存在する場合)
			},
			'touchmove mousemove'	: function(e){	//タッチ移動 or マウス移動の動作
			 	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){	//タッチ中断 or マウスアウトの動作
				if(!this.touching)return;	//このオブジェクトに対して操作を行っていない場合、処理を行わない
				e.preventDefault();			//デフォルトの動作を止める
				if(cancel)cancel(e,$(this));//第四引数として渡した処理を実行する(引数が存在する場合)
				this.touching = false;		//このオブジェクトへの操作を中断
			},
			'touchend mouseup'		: function(e){	//タッチ終了 or マウスアップの動作
				if(!this.touching)return;	//このオブジェクトに対して操作を行っていない場合、処理を行わない
				e.preventDefault();			//デフォルトの動作を止める
				up(e,$(this));				//引数として渡した処理を実行する(up)
				this.touching = false;		//このオブジェクトの操作が完了した
			}
		}).css('cursor','pointer');			//マウスon時のcssをポインタに変更
	}
});
#demo_1
		$(function(){
			$('#demo_1').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');
			}
			);
		});
	
#demo_2
		$(function(){
			$('#demo_2').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');
			}
			);
		});
	
#demo_3
		$(function(){
			$('#demo_3').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');
			}
			);
		});
	
#demo_4
		$(function(){
			$('#demo_4').touchInterface(
			function(e,$_this){ //タッチorクリックの動作
				$_this.empty().append('action:up/end');
				$_this.css('background-color','#FFF');
			}
			);
		});