Tabhold 를 이용한 롤클릭 이벤트 처리.

jquery 롱클릭 이벤트 처리 

 롱클릭을 사용할 일이 많지는 않지만.. 

특이한 경우 사용했던 때가 있어서 정리해 본다. 

 기본적으로 제공하는 이벤트보다 이걸 사용하는것을 추천..

제이쿼리 모바일쪽 탭 홀드.. http://api.jquerymobile.com/taphold/

Demo 

ONE

tap-hold

TWO

tap-hold (alt)

THREE

tap-hold
click

FOUR

tap-hold
click (alt)

FIVE

draggable
tap-hold
click (alt)

SIX

droppable
tap-hold
click (alt)

SEVEN

5s
tap-hold

HTML

    
ONE

tap-hold
    
TWO

tap-hold (alt)
    
THREE

tap-hold
click
    
FOUR

tap-hold
click (alt)
    
FIVE

draggable
tap-hold
click (alt)
    
SIX

droppable
tap-hold
click (alt)
    
SEVEN

5s
tap-hold
    

JavaScript

 $(function()
    {
        $("#one").bind("taphold", function() { $("#debug").append("\ntap and hold on ONE"); });

        $("#two").on("taphold", function() { $("#debug").append("\ntap and hold on TWO"); });

        $("#three").on("taphold",
                       {clickHandler: function() { $("#debug").append("\nclick on THREE"); }},
                       function() { $("#debug").append("\ntap and hold on THREE"); });

        $("#four").on("taphold", function() { $("#debug").append("\ntap and hold on FOUR"); })
                  .on("click",   function() { $("#debug").append("\nclick on FOUR"); });

        $("#five").draggable();
        $("#five").on("taphold", function() { $("#debug").append("\ntap and hold on FIVE"); })
                  .on("click",   function() { $("#debug").append("\nclick on FIVE"); });

        $("#six").droppable();
        $("#six").on("taphold", function() { $("#debug").append("\ntap and hold on SIX"); })
                 .on("click",   function() { $("#debug").append("\nclick on SIX"); });

        $("#seven").on("taphold", {duration: 5000}, function() { $("#debug").append("\ntap and hold on SEVEN"); });
    });

CSS

.events div {
        width: 100px;
        height: 100px;
        margin: 20px;
        float: left;
        padding: 10px;
        font-weight: bold;
    }

    .events #one {
        background: #f00;
    }

    .events #two {
        background: #0f0;
    }

    .events #three {
        background: #000;
        color: #fff;
    }

    .events #four {
        background: #fff;
        color: #000;
        border: 1px solid #000;
    }

    .events #five {
        background: #dcda07;
        color: #000;
    }

    .events #six {
        background: #f10fff;
        color: #000;
    }

    .events #seven {
        background: #3cc9f4;
        color: #000;
    }

    .events #debug {
        clear: both;
        background: #000;
        color: #fff;
        width: 100%;
        display: block;
        margin-top: 2em;
        min-height: 100px;
        padding-bottom: 1em;
        font-family: monospace;
    }

해당 박스에 롱클릭 해보시면 동작합니다. 소스는 우클릭으로 js 파일 링크 받으셔요..