jQuery를 사용하여 클릭 한 마우스 버튼을 어떻게 얻습니까?
$('div').bind('click', function(){
alert('clicked');
});
이것은 오른쪽 클릭과 왼쪽 클릭 모두에 의해 발생합니다. 오른쪽 마우스 클릭을 잡는 방법은 무엇입니까? 아래와 같은 것이 있으면 기쁠 것입니다.
$('div').bind('rightclick', function(){
alert('right mouse button is pressed');
});
답변
jQuery를 버전 1.1.3로, event.which정규화 event.keyCode및 event.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! */
}
});
답변
당신은 또한 수 bind로 contextmenu및 return 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.
답변
$("#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;
});
답변
매우 좋은 답변이 많이 있지만 IE9와 IE <9의 주요 차이점 중 하나를 사용하려고합니다 event.button.
event.button코드에 대한 이전 Microsoft 사양에 따르면 W3C에서 사용되는 코드와 다릅니다. W3C는 3 가지 경우 만 고려합니다.
- 마우스 왼쪽 버튼을 클릭-
event.button === 1 - 마우스 오른쪽 버튼을 클릭-
event.button === 3 - 마우스 가운데 버튼을 클릭-
event.button === 2
그러나 이전 Internet Explorer에서는 Microsoft가 누른 버튼을 약간 뒤집었고 8 가지 경우가 있습니다.
- 아무 버튼도 클릭하지 않았습니다-
event.button === 0또는 000 - 왼쪽 버튼을 클릭-
event.button === 1또는 001 - 오른쪽 버튼을 클릭했습니다-
event.button === 2또는 010 - 왼쪽 및 오른쪽 버튼을 클릭합니다-
event.button === 3또는 011 - 중간 버튼을 클릭했습니다-
event.button === 4또는 100 - 가운데 및 왼쪽 버튼을 클릭합니다-
event.button === 5또는 101 - 가운데 및 오른쪽 버튼을 클릭합니다-
event.button === 6또는 110 - 세 버튼 모두 클릭-
event.button === 7또는 111
이것이 이론적으로 작동하는 방식 임에도 불구하고 Internet Explorer는 2 ~ 3 개의 버튼을 동시에 누른 경우를 지원 한 적이 없습니다. W3C 표준이 이론적으로 이것을 지원할 수 없기 때문에 언급하고 있습니다.