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

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

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

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

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



답변

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!');
    }
});


답변

편집 : .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)


답변

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! */
    }
});


답변

당신은 또한 수 bindcontextmenureturn false:

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

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

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

a
(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/


답변

$("#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>


답변

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

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

http://jsfiddle.net/SRX3y/8/


답변

매우 좋은 답변이 많이 있지만 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 표준이 이론적으로 이것을 지원할 수 없기 때문에 언급하고 있습니다.