• 이것은 모바일 기기에서 터치를 통해서 기능을 실행하면 반응이 느려서 제작하게된 터치시작,터치이동,터치상태에서 손을 뗀 동작을 실행할 수 있는 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'); // 클릭 이벤트가 실행된다.
    }
});