• 이것은 모바일 기기에서 터치를 통해서 기능을 실행하면 반응이 느려서 제작하게된 터치시작,터치이동,터치상태에서 손을 뗀 동작을 실행할 수 있는 jQuery plugin이다.
• 사용조건 : jQuery가 로드되어 있어야하고, __모바일 환경에서는 터치기능이 작동하지만 PC환경에서는 클릭기능만 작동__한다.
• 이것을 만든 이유는 모바일에서 <a/>태그를 사용하여 그 영역에 터치를 하면 0.5초 이상의 딜레이가 나타난다. 다른 모바일 UI가 터치에 반응이 빠른 이유는 자바스크립트의 window.Touch객체를 사용하기 때문에 빠르다는걸 알게되어 만들었다.
• 모바일 사이트를 염두하는 프로젝트라면 상당히 쓸만한 플러그인이라고 생각한다. 단순히 터치하여 페이지를 넘기는 용도로 사용하는것이 아닌 터치를 통하여 빠른 반응을 가진 이벤트를 만들고자 하였다.

Source

;(function($){
	// 화면에 누르고나서 이동하지 않고 화면에서 떼면 complete메서드가 실행된다.
	$.fn.tabClick = function(options)
	{
		var
			$this = $(this),
			$defaults = {
				touchStart : function($this) {},
				touchMove : function($this) {},
				touchEnd : function($this) {}
			},
			$opts = $.extend($defaults, options),
			$move,
			
			_init = function()
			{
				if (window.Touch) {
					$this.bind('touchstart', onTouchStart);
					$this.bind('touchmove', onTouchMove);
					$this.bind('touchend', onTouchEnd);
				} else {
					$this.bind('click', function(){
						$opts.touchEnd($(this));
						return false;
					});
				}
			}
		;

		function onTouchStart()
		{
			$move = false;
			$opts.touchStart($(this));
		}
		
		function onTouchMove()
		{
			$move = true;
			$opts.touchMove($(this));
		}
		
		function onTouchEnd()
		{
			if (!$move) {
				$opts.touchEnd($(this));
				return false;
			}
		}

		_init();
	}
})(jQuery);

사용방법

$('a').tabClick({
	touchStart : function()
	{
		console.log('영역에 손을대면 실행');
	}
	,touchMove : function()
	{
		console.log('영역에 손을 댄 상태에서 이동할때마다 실행');
	}
	,touchEnd : function()
	{
		console.log('화면에서 손을 떼면실행');
	}
});

touchStart, touchMove, touchEnd 세 메서드를 전부 넣을 필요없으며 한개만 넣어도 된다.

$('a').tabClick({
	touchEnd : function()
	{
		console.log('Click'); // 클릭 이벤트가 실행된다.
	}
});