반응형
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.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;
});
당신이 여러 솔루션에 있다면 ^^
편집 : 팀 다운은 항상 될 수 없습니다 있다는 좋은 점납니다 right-click불이 contextmenu이벤트를,뿐만 아니라 상황에 맞는 메뉴 키를 누를 때 (A의 틀림없이 대체 인을 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.
데모 : 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;
});
매우 좋은 답변이 많이 있지만 .NET을 사용할 때 IE9와 IE <9의 주요 차이점 중 하나를 다루고 싶습니다 event.button.
event.button코드에 대한 이전 Microsoft 사양에 따르면 W3C에서 사용하는 것과 다릅니다. W3C는 다음 세 가지 경우 만 고려합니다.
- 왼쪽 마우스 버튼 클릭-
event.button === 1 - 마우스 오른쪽 버튼 클릭-
event.button === 3 - 마우스 가운데 버튼 클릭-
event.button === 2
그러나 이전 인터넷 익스플로러에서는 마이크로 소프트가 눌린 버튼에 대해 약간 뒤집고 있으며 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 - 3 개의 버튼이 모두 클릭 됨-
event.button === 7또는 111
이것이 이론적으로 작동하는 방식이라는 사실에도 불구하고 Internet Explorer는 두 개 또는 세 개의 버튼을 동시에 누르는 경우를 지원하지 않습니다. W3C 표준은 이론적으로도이를 지원할 수 없기 때문에 언급합니다.
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 이벤트 트리거"에 대한 답변
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...
}
});
"더 나은 자바 스크립트 마우스 이벤트"를 찾고 있다면
- left mousedown
- 가운데 mousedown
- right mousedown
- 마우스 왼쪽
- 가운데 mouseup
- 오른쪽 마우스
- 왼쪽 클릭
- 중간 클릭
- 마우스 오른쪽 버튼으로 클릭
- 마우스 휠 위로
- 마우스 휠 아래로
위의 이벤트를 트리거하고 두통 작업을 제거하는이 크로스 브라우저 일반 자바 스크립트를 살펴보세요. 복사하여 스크립트 헤드에 붙여 넣거나 <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);
})();
더 나은 마우스 클릭 이벤트 예 (단순함을 위해 jquery를 사용하지만 위의 내용은 브라우저 간 작동하고 동일한 이벤트 이름을 실행하며 IE는 이름 앞에을 사용합니다)
<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)}();
$("body").on({
click: function(){alert("left click");},
contextmenu: function(){alert("right click");}
});
$(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;
}
});
jquery를 사용하면 event object type
jQuery(".element").on("click contextmenu", function(e){
if(e.type == "contextmenu") {
alert("Right click");
}
});
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
}
});
$.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");
});
$.event.special.rightclick = {
bindType: "contextmenu",
delegateType: "contextmenu"
};
$(document).on("rightclick", "div", function() {
console.log("hello");
return false;
});
반응형
'Nice programing' 카테고리의 다른 글
| Entity Framework에서 삽입 된 엔티티의 ID를 얻으려면 어떻게해야합니까? (0) | 2020.10.03 |
|---|---|
| UTF-8로 인코딩 된 NSData를 NSString으로 변환 (0) | 2020.10.03 |
| Ruby on Rails 데이터베이스 제거 또는 재생성 (0) | 2020.10.03 |
| PNG, GIF, JPEG, SVG의 다른 사용 사례는 무엇입니까? (0) | 2020.10.03 |
| .NET을 사용하여 16 진수 색상 코드에서 색상을 얻으려면 어떻게합니까? (0) | 2020.10.03 |