jQuery로 마우스 왼쪽 클릭과 오른쪽 클릭을 구별하는 방법


574

jQuery를 사용하여 클릭 한 마우스 버튼을 어떻게 얻습니까?

$('div').bind('click', function(){
    alert('clicked');
});

이것은 오른쪽 클릭과 왼쪽 클릭 모두에 의해 발생합니다. 오른쪽 마우스 클릭을 잡는 방법은 무엇입니까? 아래와 같은 것이 있으면 기쁠 것입니다.

$('div').bind('rightclick', function(){ 
    alert('right mouse button is pressed');
});

답변:


900

jQuery를 버전 1.1.3로, event.which정규화 event.keyCodeevent.charCode당신이 브라우저 호환성 문제에 대해 걱정할 필요가 없습니다. 에 대한 설명서event.which

event.which 왼쪽, 가운데 및 오른쪽 마우스 버튼 각각에 1, 2 또는 3을 제공합니다.

$('#element').mousedown(function(event) {
    switch (event.which) {
        case 1:
            alert('Left Mouse button pressed.');
            break;
        case 2:
            alert('Middle Mouse button pressed.');
            break;
        case 3:
            alert('Right Mouse button pressed.');
            break;
        default:
            alert('You have a strange Mouse!');
    }
});

4
@ Jeff Hines-Chrome에서 마우스 오른쪽 버튼 클릭을 감지하려고 시도했으며 여기에 표시된 구현이 제대로 작동하는 것처럼 보였지만 alert ()가 컨텍스트 메뉴가 나타나지 않기 때문이라는 것을 깨달았습니다. :( boo
jinglesthula

15
아래로 스크롤하여 @JeffHines의 답변 을 읽으십시오 . 기본적으로 jQuery에는 이벤트 'contextmenu'가 내장되어 있습니다.
jpadvo

8
@jpadvo jQuery는 "contextmenu"로 빌드하지 않았 contextmenu으며 브라우저의 기본입니다. 기본 JavaScript에서는 oncontextmenu이벤트에 첨부 할 수 있습니다 .
Naftali 일명 Neal

6
ie8 : 속성 'thing'의 값을 가져올 수 없음 : 객체가 null이거나 정의되지 않음
Simon

2
이벤트가 시작된 후 컨텍스트 메뉴가 나타나지 않도록 할 수 있습니까?
kmoney12

251

편집 : .on()jQuery 1.7 이상을 사용하여 동적으로 추가 된 요소에서 작동하도록 변경했습니다 .

$(document).on("contextmenu", ".element", function(e){
   alert('Context Menu event has fired!');
   return false;
});

데모 : jsfiddle.net/Kn9s7/5

[원래 게시물의 시작] 이것은 나를 위해 일한 것입니다 :

$('.element').bind("contextmenu",function(e){
   alert('Context Menu event has fired!');
   return false;
}); 

여러 솔루션을 사용하는 경우 ^^

편집 : Tim Down은 항상 이벤트 right-click를 발생시키는 contextmenu것이 아니라 컨텍스트 메뉴 키를 누를 때 좋은 점을 제시합니다 (아마도을 대신합니다 right-click)


28
이것이 정답입니다. 이 이벤트는 모든 관련 브라우저에서 작동하며 클릭 한 번으로 트리거됩니다 (마우스 아래로 + 마우스를 가까이에서 위로).
Nick Retallack

3
이것은입니다 은 <텍스트 영역>에서 마우스 오른쪽 버튼으로 클릭 캡처에 관해서는 나를 위해 일한 솔루션
styler1972

17
마우스 오른쪽 버튼을 클릭하는 것이 상황에 맞는 메뉴를 트리거하는 유일한 방법은 아닙니다.
Tim Down

3
contextmenu이벤트 발생이 항상 마우스 오른쪽 버튼을 클릭했다고 암시하는 것은 아니기 때문에 잘못된 접근법이라고 생각합니다 . 올바른 방법은 마우스 이벤트 ( click이 경우)에서 단추 정보를 얻는 것 입니다.
Tim Down

1
야! 고마워, 이것은 훌륭해 보이지만 테이블 행이나 본문과 같은 요소에 바인딩 할 수는 없습니다. $ (window)와 함께 작동합니다. backbone.js를 사용하여 영역 #main에 새로운 내용 등을 채 웁니다.
Harry

84

which마우스 이벤트에서 이벤트 객체 의 속성을 확인하여 어떤 마우스 버튼을 눌렀는지 쉽게 알 수 있습니다 .

/*
  1 = Left   mouse button
  2 = Centre mouse button
  3 = Right  mouse button
*/

$([selector]).mousedown(function(e) {
    if (e.which === 3) {
        /* Right mouse button was clicked! */
    }
});

3
위에 링크 된 jQuery 플러그인이 e.button==2대신 사용 중입니다.
ceejayoz

6
네. 사용 event.button크로스 브라우저 것이 더 문제보다 event.which의 버튼에 사용되는 번호 등 event.button다양하다. 2009 년 1 월의이 기사를보십시오 -unixpapa.com/js/mouse.html
Russ Cam

1
mouseup사람이 실제로 항목을 클릭했는지 확인하는 것이 낫지 않습니까? 실수로 무언가를 클릭하면 마우스 버튼을 누른 상태에서 요소 밖으로 드래그하여 클릭을 방지 할 수있는 경우가 많습니다.
Chris Marisic 2014

1
@ChrisMarisic mouseup은 아마도 더 좋은 이벤트 일 것입니다. 이것은 event.which마우스 버튼 클릭 사용의 예일뿐입니다
Russ Cam

39

당신은 또한 수 bindcontextmenureturn false:

$('selector').bind('contextmenu', function(e){
    e.preventDefault();
    //code
    return false;
});

데모 : http://jsfiddle.net/maniator/WS9S2/

또는 동일한 작업을 수행하는 빠른 플러그인을 만들 수 있습니다.

(function( $ ) {
  $.fn.rightClick = function(method) {

    $(this).bind('contextmenu rightclick', function(e){
        e.preventDefault();
        method();
        return false;
    });

  };
})( jQuery );

데모 : http://jsfiddle.net/maniator/WS9S2/2/


사용 .on(...)jQuery를> = 1.7 :

$(document).on("contextmenu", "selector", function(e){
    e.preventDefault();
    //code
    return false;
});  //does not have to use `document`, it could be any container element.

데모 : http://jsfiddle.net/maniator/WS9S2/283/


1
@Raynos 네, 그러나 이것이 오른쪽 클릭 이벤트를 처리하는 유일한 방법입니다. 상황에 맞는 메뉴가 여전히 있으면 오른쪽 클릭으로 아무것도 할 수 없습니다.
Naftali 일명 Neal

1
@Raynos - 확실히 더가 같은 내부 도구를 구축하거나 자신의 개인 use..I'm 위해 뭔가를 코딩 같은 포인트가 유효하지 않은 많은 경우가있다
VSYNC

1
당신이 실제로 (예를 들어, 클릭 등) JQuery와 이벤트 핸들러 중 하나처럼 행동하고 싶었다면, 즉해야한다 method.call(this, e);대신 method();그 방법 method에 대한 올바른 값을 가져옵니다 this도 제대로 전달 된 이벤트 객체를 가지고있다.
Jeremy T

@JeremyT 사실입니다 ... 당신은 당신이 원하는 방식으로 콜백을 처리 할 수 ​​있습니다 ^ _ ^
Naftali 일명 Neal

30

$("#element").live('click', function(e) {
  if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
       alert("Left Button");
    }
    else if(e.button == 2){
       alert("Right Button");
    }
});

사물의 현재 상태 업데이트 :

var $log = $("div.log");
$("div.target").on("mousedown", function() {
  $log.text("Which: " + event.which);
  if (event.which === 1) {
    $(this).removeClass("right middle").addClass("left");
  } else if (event.which === 2) {
    $(this).removeClass("left right").addClass("middle");
  } else if (event.which === 3) {
    $(this).removeClass("left middle").addClass("right");
  }
});
div.target {
  border: 1px solid blue;
  height: 100px;
  width: 100px;
}

div.target.left {
  background-color: #0faf3d;
}

div.target.right {
  background-color: #f093df;
}

div.target.middle {
  background-color: #00afd3;
}

div.log {
  text-align: left;
  color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target"></div>
<div class="log"></div>


1
이 미시에 특정입니까? 즉, 다른 브라우저에서 이식 가능합니까?
Taryn East

13
이 방법은 event.which교차 브라우저 호환성을 제거하기 위해 도입 된 대로 불필요 합니다.
Acorn

8
실제로 브라우저 간 비 호환성을 제거하는 이벤트가 의심되지만 그저 나뿐입니다.
DwB


15

매우 좋은 답변이 많이 있지만 IE9와 IE <9의 주요 차이점 중 하나를 사용하려고합니다 event.button.

event.button코드에 대한 이전 Microsoft 사양에 따르면 W3C에서 사용되는 코드와 다릅니다. W3C는 3 가지 경우 만 고려합니다.

  1. 마우스 왼쪽 버튼을 클릭- event.button === 1
  2. 마우스 오른쪽 버튼을 클릭- event.button === 3
  3. 마우스 가운데 버튼을 클릭- event.button === 2

그러나 이전 Internet Explorer에서는 Microsoft가 누른 버튼을 약간 뒤집었고 8 가지 경우가 있습니다.

  1. 아무 버튼도 클릭하지 않았습니다- event.button === 0또는 000
  2. 왼쪽 버튼을 클릭- event.button === 1또는 001
  3. 오른쪽 버튼을 클릭했습니다- event.button === 2또는 010
  4. 왼쪽 및 오른쪽 버튼을 클릭합니다- event.button === 3또는 011
  5. 중간 버튼을 클릭했습니다- event.button === 4또는 100
  6. 가운데 및 왼쪽 버튼을 클릭합니다- event.button === 5또는 101
  7. 가운데 및 오른쪽 버튼을 클릭합니다- event.button === 6또는 110
  8. 세 버튼 모두 클릭- event.button === 7또는 111

이것이 이론적으로 작동하는 방식 임에도 불구하고 Internet Explorer는 2 ~ 3 개의 버튼을 동시에 누른 경우를 지원 한 적이 없습니다. W3C 표준이 이론적으로 이것을 지원할 수 없기 때문에 언급하고 있습니다.


6
그래서 버튼을 누를 때 버튼을 event.button === 0클릭하지 않은 것, 훌륭한 IEಠ_ಠ
Sinan

IE의 버전의는 9보다 낮은 것을
콘스탄틴 Dinev에게

개발자가 총체적으로 지원 선택을 중단하면 사람들은 전환해야하고 더 이상 개발자 지원에 대해 걱정할 필요가 없습니다.
ahnbizcad

8

TheVillageIdiot의 대답에 약간의 적응이 더 깔끔한 것 같습니다.

$('#element').bind('click', function(e) {
  if (e.button == 2) {
    alert("Right click");
  }
  else {
    alert("Some other click");
  }
}

편집 : JQuery는 e.which각각 왼쪽, 중간 및 오른쪽 클릭에 대해 1, 2, 3을 반환 하는 속성을 제공합니다 . 그래서 당신은 또한 사용할 수 있습니다if (e.which == 3) { alert("right click"); }

"중간 클릭을 사용하여 onclick 이벤트 트리거"에 대한 답변도 참조 하십시오.


3

event.which === 1 jQuery를 사용할 때 왼쪽 클릭인지 확인하십시오.

그러나 수정 자 키도 고려해야합니다. ctrlcmdshiftalt

단순하고 수정되지 않은 왼쪽 클릭 만 잡으려는 경우 다음과 같이 할 수 있습니다.

var isSimpleClick = function (event) {
  return !(
    event.which !== 1 || // not a left click
    event.metaKey ||     // "open link in new tab" (mac)
    event.ctrlKey ||     // "open link in new tab" (windows/linux)
    event.shiftKey ||    // "open link in new window"
    event.altKey         // "save link as"
  );
};

$('a').on('click', function (event) {
  if (isSimpleClick(event)) {
    event.preventDefault();
    // do something...
  }
});

1

"더 나은 자바 스크립트 마우스 이벤트"를 찾고 있다면

  • 마우스 왼쪽 버튼
  • 가운데 마우스 다운
  • 오른쪽 마우스 다운
  • 마우스 왼쪽
  • 가운데 마우스
  • 오른쪽 마우스
  • 왼쪽 클릭
  • 가운데 클릭
  • 마우스 오른쪽 버튼으로 클릭
  • 마우스 휠
  • 마우스 휠

위의 이벤트를 트리거하고 두통을 제거하는이 크로스 브라우저 일반 자바 스크립트를 살펴보십시오. 스크립트 헤드에 복사하여 붙여 넣거나 <head>문서 의 파일에 포함하면됩니다 . 그런 다음 이벤트를 바인딩하고 아래 코드 블록을 참조하십시오. 아래의 코드 블록은 이벤트를 캡처하고 할당 된 함수를 실행하는 jquery 예제를 보여줍니다. 일반 자바 스크립트 바인딩에서도 작동합니다.

그것이 작동하는 것에 관심이 있다면 jsFiddle을 살펴보십시오 : https://jsfiddle.net/BNefn/

/**
   Better Javascript Mouse Events
   Author: Casey Childers
**/
(function(){
    // use addEvent cross-browser shim: https://gist.github.com/dciccale/5394590/
    var addEvent = function(a,b,c){try{a.addEventListener(b,c,!1)}catch(d){a.attachEvent('on'+b,c)}};

    /* This function detects what mouse button was used, left, right, middle, or middle scroll either direction */
    function GetMouseButton(e) {
        e = window.event || e; // Normalize event variable

        var button = '';
        if (e.type == 'mousedown' || e.type == 'click' || e.type == 'contextmenu' || e.type == 'mouseup') {
            if (e.which == null) {
                button = (e.button < 2) ? "left" : ((e.button == 4) ? "middle" : "right");
            } else {
                button = (e.which < 2) ? "left" : ((e.which == 2) ? "middle" : "right");
            }
        } else {
            var direction = e.detail ? e.detail * (-120) : e.wheelDelta;
            switch (direction) {
                case 120:
                case 240:
                case 360:
                    button = "up";
                break;
                case -120:
                case -240:
                case -360:
                    button = "down";
                break;
            }
        }

        var type = e.type
        if(e.type == 'contextmenu') {type = "click";}
        if(e.type == 'DOMMouseScroll') {type = "mousewheel";}

        switch(button) {
            case 'contextmenu':
            case 'left':
            case 'middle':
            case 'up':
            case 'down':
            case 'right':
                if (document.createEvent) {
                  event = new Event(type+':'+button);
                  e.target.dispatchEvent(event);
                } else {
                  event = document.createEventObject();
                  e.target.fireEvent('on'+type+':'+button, event);
                }
            break;
        }
    }

    addEvent(window, 'mousedown', GetMouseButton);
    addEvent(window, 'mouseup', GetMouseButton);
    addEvent(window, 'click', GetMouseButton);
    addEvent(window, 'contextmenu', GetMouseButton);

    /* One of FireFox's browser versions doesn't recognize mousewheel, we account for that in this line */
    var MouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
    addEvent(window, MouseWheelEvent, GetMouseButton);
})();

보다 나은 마우스 클릭 이벤트 예제

<div id="Test"></div>
<script type="text/javascript">
    $('#Test').on('mouseup',function(e){$(this).append(e.type+'<br />');})
              .on('mouseup:left',function(e){$(this).append(e.type+'<br />');})
              .on('mouseup:middle',function(e){$(this).append(e.type+'<br />');})
              .on('mouseup:right',function(e){$(this).append(e.type+'<br />');})

              .on('click',function(e){$(this).append(e.type+'<br />');})
              .on('click:left',function(e){$(this).append(e.type+'<br />');})
              .on('click:middle',function(e){$(this).append(e.type+'<br />');})
              .on('click:right',function(e){$(this).append(e.type+'<br />');})

              .on('mousedown',function(e){$(this).html('').append(e.type+'<br />');})
              .on('mousedown:left',function(e){$(this).append(e.type+'<br />');})
              .on('mousedown:middle',function(e){$(this).append(e.type+'<br />');})
              .on('mousedown:right',function(e){$(this).append(e.type+'<br />');})

              .on('mousewheel',function(e){$(this).append(e.type+'<br />');})
              .on('mousewheel:up',function(e){$(this).append(e.type+'<br />');})
              .on('mousewheel:down',function(e){$(this).append(e.type+'<br />');})
              ;
</script>

그리고 축소 버전이 필요한 사람들에게는 ...

!function(){function e(e){e=window.event||e;var t="";if("mousedown"==e.type||"click"==e.type||"contextmenu"==e.type||"mouseup"==e.type)t=null==e.which?e.button<2?"left":4==e.button?"middle":"right":e.which<2?"left":2==e.which?"middle":"right";else{var n=e.detail?-120*e.detail:e.wheelDelta;switch(n){case 120:case 240:case 360:t="up";break;case-120:case-240:case-360:t="down"}}var c=e.type;switch("contextmenu"==e.type&&(c="click"),"DOMMouseScroll"==e.type&&(c="mousewheel"),t){case"contextmenu":case"left":case"middle":case"up":case"down":case"right":document.createEvent?(event=new Event(c+":"+t),e.target.dispatchEvent(event)):(event=document.createEventObject(),e.target.fireEvent("on"+c+":"+t,event))}}var t=function(e,t,n){try{e.addEventListener(t,n,!1)}catch(c){e.attachEvent("on"+t,n)}};t(window,"mousedown",e),t(window,"mouseup",e),t(window,"click",e),t(window,"contextmenu",e);var n=/Firefox/i.test(navigator.userAgent)?"DOMMouseScroll":"mousewheel";t(window,n,e)}();

1
$("body").on({
    click: function(){alert("left click");},
    contextmenu: function(){alert("right click");}   
});

왜 작동하는지에 대한 세부 사항을 추가해야합니다. -동의하지만 n00b에 이유를 설명하지 않습니다.
Adam Copley

0
$(document).ready(function () {
    var resizing = false;
    var frame = $("#frame");
    var origHeightFrame = frame.height();
    var origwidthFrame = frame.width();
    var origPosYGrip = $("#frame-grip").offset().top;
    var origPosXGrip = $("#frame-grip").offset().left;
    var gripHeight = $("#frame-grip").height();
    var gripWidth = $("#frame-grip").width();

    $("#frame-grip").mouseup(function (e) {
        resizing = false;
    });

    $("#frame-grip").mousedown(function (e) {
        resizing = true;
    });
    document.onmousemove = getMousepoints;
    var mousex = 0, mousey = 0, scrollTop = 0, scrollLeft = 0;
    function getMousepoints() {
        if (resizing) {
            var MouseBtnClick = event.which;
            if (MouseBtnClick == 1) {
                scrollTop = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
                scrollLeft = document.documentElement ? document.documentElement.scrollLeft : document.body.scrollLeft;
                mousex = event.clientX + scrollLeft;
                mousey = event.clientY + scrollTop;

                frame.height(mousey);
                frame.width(mousex);
            }
            else {
                resizing = false;
            }
        }
        return true;

    }


});

@ Nitin.Katti :-마우스의 왼쪽 버튼을 멈 추면 크기 조정이 중지됩니다.
user2335866

0

jquery로 사용할 수 있습니다 event object type

jQuery(".element").on("click contextmenu", function(e){
   if(e.type == "contextmenu") {
       alert("Right click");
   }
});

0

JQuery없이 할 수있는 방법도 있습니다!

이것을 확인하십시오 :

document.addEventListener("mousedown", function(evt) {
    switch(evt.buttons) {
      case 1: // left mouse
      case 2: // right mouse
      case 3: // middle mouse <- I didn't tested that, I just got a touchpad
    }
});

내 PC에서 가운데 ​​마우스가 4 인 것 같습니다 (Ubuntu 14.04-FireFox). 왼쪽과 오른쪽이 3이고 중간이 4라고 믿습니다. 더 나은 "크로스 브라우저", "크로스 플랫폼"방식이 있어야합니다 ...
Paul

0
$.fn.rightclick = function(func){
    $(this).mousedown(function(event){
        if(event.button == 2) {
            var oncontextmenu = document.oncontextmenu;
            document.oncontextmenu = function(){return false;};
            setTimeout(function(){document.oncontextmenu = oncontextmenu;},300);
            func(event);
            return false;
        }
    });
};

$('.item').rightclick(function(e){ 
    alert("item");
}); 

0

그들이하거나 사용할 수 없습니다 경우 그에게 궁금해하는 사람 event.which바닐라 JS 또는 각도 : 그것은 이제 사용되지 그렇게 사용하여 선호하는 event.buttons대신.

참고 : 이 방법과 (마우스 다운) 이벤트 :

  • 왼쪽 클릭 프레스 는 1에 연결됩니다
  • 오른쪽 클릭 프레스 는 2에 연결됩니다
  • 스크롤 버튼 누름 은 4와 연관됩니다

and (mouseup) 이벤트는 같은 숫자를 반환 하지 않고 대신 0을 반환합니다 .

출처 : https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons


-1
    $.event.special.rightclick = {
     bindType: "contextmenu",
        delegateType: "contextmenu"
      };

   $(document).on("rightclick", "div", function() {
   console.log("hello");
    return false;
    });

1
안녕. 이 답변은 삭제 품질이 낮은 것으로 표시되었습니다. 얼마 전에 답변 한 질문에 대한 답변을 추가 한 것 같습니다. 답변에이 기고서가 수용된 답변을 어떻게 향상시키는 지 설명하는 설명이없는 한, 나는 투표를 삭제하기도합니다.
Popnoodles 2016 년

1
@ popnoodles는 괜찮지 만 반복하지 마십시오.
Yip Man WingChun 2016 년
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.