{"id":2459,"date":"2008-12-03T03:34:44","date_gmt":"2008-12-03T03:34:44","guid":{"rendered":"http:\/\/dev.jblove.net\/?p=2459"},"modified":"2008-12-03T03:34:44","modified_gmt":"2008-12-03T03:34:44","slug":"%ed%8e%8c-%eb%a7%88%ec%9a%b0%ec%8a%a4-%ec%a0%9c%ec%8a%a4%ec%b2%98-js","status":"publish","type":"post","link":"https:\/\/jblove.net\/?p=2459","title":{"rendered":"[\ud38c] \ub9c8\uc6b0\uc2a4 \uc81c\uc2a4\ucc98 – js"},"content":{"rendered":"


\n
\n
\n
[\uc2a4\ud06c\ub9bd\ud2b8] [JS] Mouse Gesture<\/STRONG> <\/TD>
\n<\/TR><\/TBODY><\/TABLE>
\n
\n
\n
\n<\/TR>
\n
\n
\n<\/TR>
\n
\n<\/TR>
\n
\n
\n<\/TR>
\n
\n
\uae00\uc4f4\uc774<\/TD>
\n		  Seeker<\/SPAN><\/TD>
\n		 \ub0a0 \uc9dc<\/TD>
\n		08-10-30 21:25<\/TD>
\n		 \uc870 \ud68c<\/TD>
\n		823<\/TD><\/TR>
\n
Link1<\/TD>
\n		  http:\/\/www.seeker.kr\/test\/mouse_gesture.html<\/STRONG> (258)<\/A><\/TD><\/TR>
\n

\n
\n
\n
\n<\/TR>
\n
\n
\ub9c8\uc6b0\uc2a4 \uc81c\uc2a4\ucc98, \uc989 \ub9c8\uc6b0\uc2a4\uc758 \uc774\ub3d9\uc73c\ub85c \uc9c0\uc815\ud55c \ub3d9\uc791\uc744 \uc2e4\ud589\ud558\ub294 \uae30\ub2a5\uc785\ub2c8\ub2e4.

FF\ub294 \uc774 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ubd80\uac00\uae30\ub2a5\uc774 \uba87\uac1c \uc788\uace0, \uc544\uc608 \uc81c\uc2a4\ucc98 \uae30\ub2a5\uc774 \uae30\ubcf8\uc73c\ub85c \ub0b4\uc7a5\ub41c \ube0c\ub77c\uc6b0\uc800\ub3c4 \uc788\uc9c0\ub9cc IE\ub294 \uc804\ud600 \uc0c1\uad00\uc5c6\uae30 \ub54c\ubb38\uc5d0…

\ub2e8\ucd95\ud0a4 \uae30\ub2a5\uc744 \ub9cc\ub4e4\uace0 \ub09c \ub4a4 \ubb38\ub4dd \uc774\uac83\ub3c4 \uc788\uc73c\uba74 \ud3b8\ub9ac\ud558\uaca0\ub2e4 \uc2f6\uc5b4\uc11c \ub9cc\ub4e4\uc5b4 \ubd24\uc2b5\ub2c8\ub2e4.


_gestures \uc5d0 \ub3d9\uc791\uacfc \ud568\uc218\ub97c \uc9c0\uc815\ud558\uba74 \ub429\ub2c8\ub2e4.


\ub9c1\ud06c\ub41c \ud398\uc774\uc9c0\uc5d0\uc11c \uac04\ub2e8\ud55c \ub3d9\uc791\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.


# \ub3d9\uc791 : U(up) \/ D(down) \/ R(right) \/ L(left) \uc758 4\uac00\uc9c0 \ubc29\ud5a5\uc73c\ub85c \uad6c\uc131

# \ub2e8\uacc4 \uc81c\ud55c\uc740 \uc5c6\uc74c. (\ud558\uc9c0\ub9cc \ub9ce\uc544\ub3c4 3\ub2e8\uacc4 \uc774\ud558\ub85c \uc9c0\uc815\ud558\ub294\uac8c \uc0ac\uc6a9\uc5d0 \ud3b8\ub9ac)

# 20\ud53d\uc140 \uc774\uc0c1\uc758 \ub3d9\uc791\ub9cc \uc778\uc2dd (\uc778\uc2dd \uae38\uc774 \uc870\uc815 \uac00\ub2a5)

# \ubc29\ud5a5 \uad6c\ubd84\uc740 60\ub3c4, \uc989 \uc218\uc9c1\uc5d0\uc11c \uc88c\uc6b0 30\ub3c4(\ud569 60\ub3c4) \uc774\ub0b4\uc758 \ubc94\uc704\ub97c \uc9c0\ub098\uba74 U \ud639\uc740 D\uc774\uace0 \uc218\ud3c9\uc5d0\uc11c \uc0c1\ud558 30\ub3c4 \uc774\ub0b4\uc758 \ubc94\uc704\ub97c \uc9c0\ub098\uba74 R \ud639\uc740 L \ud310\uc815 (\ubc94\uc704 \uc870\uc815 \uac00\ub2a5)


# IE6\/7, FF3, \ud06c\ub86c\uc5d0\uc11c \ud14c\uc2a4\ud2b8\ud588\uc2b5\ub2c8\ub2e4.




\/*
\uc774 \uc2a4\ud06c\ub9bd\ud2b8\uc5d0 \ub300\ud55c \ubaa8\ub4e0 \uad8c\ub9ac\ub294 \uc81c\uc791\uc790\uc5d0\uac8c \uc788\uc2b5\ub2c8\ub2e4.
\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc774\uc6a9\ud558\ub824\uba74 \uc81c\uc791\uc790\ub97c \ubc18\ub4dc\uc2dc \ud45c\uae30\ud574\uc57c \ud569\ub2c8\ub2e4.

\uc81c\uc791\uc790 : Seeker
\uc81c\uc791\uc790 \ud648\ud398\uc774\uc9c0 : <\/FONT>http:\/\/www.seeker.kr\/<\/FONT><\/A>
*\/

\/\/ \uc774\ubca4\ud2b8 \ubd80\uc5ec \ud568\uc218
function addEvent(target,e,f) {
    if(window.addEventListener)
        target.addEventListener(e,f,false);
    else if(window.attachEvent)
        target.attachEvent(“on”+e,f);
    else
        target[“on”+e] = f;
}

function removeEvent(target,e,f) {
    if(window.removeEventListener)
        target.removeEventListener(e,f,false);
    else if(window.detachEvent)
        target.detachEvent(“on”+e,f);
    else
        target[“on”+e] = null;
}


\/\/ \uc561\uc158 \ub9ac\uc2a4\ud2b8
var _gestures = {
    U : [“\uc2a4\ud06c\ub864 UP”,function() {document.documentElement.scrollTop -= document.documentElement.clientHeight;}],
    D : [“\uc2a4\ud06c\ub864 DOWN”,function() {document.documentElement.scrollTop += document.documentElement.clientHeight;}],
    LU : [“\ud398\uc774\uc9c0 \uc0c1\ub2e8”,function() {document.documentElement.scrollTop = 0;}],
    LD : [“\ud398\uc774\uc9c0 \ud558\ub2e8”,function() {document.documentElement.scrollTop = document.documentElement.scrollHeight;}],

    R : [“\uc55e\uc73c\ub85c”,function() {history.forward();}],
    L : [“\ub4a4\ub85c”,function() {history.back();}],

    DR : [“\uc0c8 \ucc3d(\ud0ed) \uc5f4\uae30”,function() {window.open(‘about:blank’);}],
    DL : [“\ucc3d(\ud0ed) \ub2eb\uae30”,function() {window.close();}],

    DU : [“\ucc3d(\ud0ed) \ubcf5\uc0ac”,function() {window.open(location.href);}],
    UD : [“\uc0c8\ub85c \uace0\uce68”,function() {location.reload();}]
}

\/\/ \uc0ac\uc6a9 \uc804\uc5ed\ubcc0\uc218 \uc120\uc5b8
var _g_pX,_g_pY,_g_tX,_g_tY;
var _g_path = “”;
var _g_target;
var _g_t_dir = “”;

\/\/ \ub9c8\uc6b0\uc2a4 \ub2e4\uc6b4\uc2dc
function _g_down(e) {
    var e = e || event;
    _g_path = “”;
    _g_target = e.target || e.srcElement;

    if(e.button == 2) {
        _g_pX = _g_tX = e.clientX;
        _g_pY = _g_tY = e.clientY;
        addEvent(document,”mousemove”,_g_move);
        addEvent(document,”mouseup”,_g_up);
    } else {
        removeEvent(document,”mousemove”,_g_move);
        removeEvent(document,”mouseup”,_g_up);
    }
}

\/\/ \ub9c8\uc6b0\uc2a4 \uc5c5\uc2dc
function _g_up(e) {
    if(e.button == 2) {
        if(_g_path in _gestures) _gestures[_g_path][1]();
        removeEvent(document,”mousemove”,_g_move);
        removeEvent(document,”mouseup”,_g_up);
    }
}

\/\/ \ucee8\ud14d\uc2a4\ud2b8 \uba54\ub274 \ubc29\uc9c0\uc6a9 \ub9ac\ud134 \ub9c9\ub294 \ud568\uc218
function _g_false(e) {
    if(_g_path) {
        var e = e || event;
        if(e.preventDefault) e.preventDefault();
        if(“returnValue” in e) e.returnValue = false;
        return false;
    }
}

addEvent(document,”contextmenu”,_g_false);

\/\/ \ub9c8\uc6b0\uc2a4 \uc774\ub3d9\uc2dc
function _g_move(e) {
    var e = e || event;
    var x = e.clientX;
    var y = e.clientY;
    var mX = x – _g_pX;
    var mY = _g_pY – y;
    var dir;

    if(mX == 0) {
        if(mY > 0) dir = “U”;
        else if(mY < 0) dir = “D”;
        else return;
    } else {
        var slope = mY\/mX;
        if(slope > 2 || slope < -2) {
            if(mY > 0) dir = “U”;
            else dir = “D”;
        } else if(slope < 0.5 && slope > -0.5) {
            if(mX > 0) dir = “R”;
            else dir = “L”;
        }
    }

    if(dir && dir != _g_path.charAt(_g_path.length-1)) {
        if(_g_t_dir != dir) {
            _g_tX = _g_pX;
            _g_tY = _g_pY;
        }
        if(Math.abs(x-_g_tX) > 20 || Math.abs(_g_tY-y) > 20) {
            _g_path += dir;
        }
    }
    _g_t_dir = dir;
    _g_pX = x;
    _g_pY = y;

    window.status = _g_path + ((_g_path in _gestures)?(” : ” + _gestures[_g_path][0]):””);
}

addEvent(document,”mousedown”,_g_down);<\/FONT> <\/TD><\/TR><\/TBODY><\/TABLE><\/TD><\/TR><\/TBODY><\/TABLE><\/p>\n","protected":false},"excerpt":{"rendered":"

[\uc2a4\ud06c\ub9bd\ud2b8] [JS] Mouse Gesture \uae00\uc4f4\uc774   Seeker \ub0a0 \uc9dc 08-10-30 21:25 \uc870 \ud68c 823 Link1   http:\/\/www.seeker.kr\/test\/mouse_gesture.html (258) \ub9c8\uc6b0\uc2a4 \uc81c\uc2a4\ucc98, \uc989 \ub9c8\uc6b0\uc2a4\uc758 \uc774\ub3d9\uc73c\ub85c \uc9c0\uc815\ud55c \ub3d9\uc791\uc744 \uc2e4\ud589\ud558\ub294 \uae30\ub2a5\uc785\ub2c8\ub2e4. FF\ub294 \uc774 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ubd80\uac00\uae30\ub2a5\uc774 \uba87\uac1c \uc788\uace0, \uc544\uc608 \uc81c\uc2a4\ucc98 \uae30\ub2a5\uc774 \uae30\ubcf8\uc73c\ub85c \ub0b4\uc7a5\ub41c \ube0c\ub77c\uc6b0\uc800\ub3c4 \uc788\uc9c0\ub9cc IE\ub294 \uc804\ud600 \uc0c1\uad00\uc5c6\uae30 \ub54c\ubb38\uc5d0… \ub2e8\ucd95\ud0a4 \uae30\ub2a5\uc744 \ub9cc\ub4e4\uace0 \ub09c \ub4a4 \ubb38\ub4dd \uc774\uac83\ub3c4 \uc788\uc73c\uba74 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[51],"tags":[368,369,155],"class_list":["post-2459","post","type-post","status-publish","format-standard","hentry","category-papa-php","tag-js","tag-369","tag-155"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/jblove.net\/index.php?rest_route=\/wp\/v2\/posts\/2459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jblove.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jblove.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jblove.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jblove.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2459"}],"version-history":[{"count":0,"href":"https:\/\/jblove.net\/index.php?rest_route=\/wp\/v2\/posts\/2459\/revisions"}],"wp:attachment":[{"href":"https:\/\/jblove.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jblove.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jblove.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}