[JQUERY] jQuery로 왼쪽 및 오른쪽 마우스 클릭을 구별하는 방법
JQUERYjQuery로 왼쪽 및 오른쪽 마우스 클릭을 구별하는 방법
해결법
-
1.의 jQuery event.keyCode를 정상화 event.which 버전 1.1.3 및 event.charCode의로서 당신은 브라우저 호환성 문제에 대해 걱정할 필요가 없습니다. event.which에 대한 문서
의 jQuery event.keyCode를 정상화 event.which 버전 1.1.3 및 event.charCode의로서 당신은 브라우저 호환성 문제에 대해 걱정할 필요가 없습니다. event.which에 대한 문서
event.which 2, 1 줄 또는 각각 그래서, 왼쪽 중간과 오른쪽 마우스 버튼 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!'); } });
-
2.편집 : 나는 jQuery를 1.7 이상에서 CSTE 연구진 ()를 사용하여 동적으로 추가 요소에 대한 작업에 변경 :
편집 : 나는 jQuery를 1.7 이상에서 CSTE 연구진 ()를 사용하여 동적으로 추가 요소에 대한 작업에 변경 :
$(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; });
경우 여러 솔루션에 있습니다 ^^
편집 : 팀 다운이 항상 마우스 오른쪽 버튼을 클릭 할 수 없을거야 것을 좋은 점을 가져다가 터하려면 contextmenu 이벤트뿐만 아니라 상황에 맞는 메뉴 키 (오른쪽 클릭에 대한 교체가 틀림 인)을 누를 때
-
3.당신은 쉽게 마우스 이벤트에 대한 이벤트 객체의 어떤 속성을 확인하여 눌러 진 마우스 버튼을 알 수 있습니다 :
당신은 쉽게 마우스 이벤트에 대한 이벤트 객체의 어떤 속성을 확인하여 눌러 진 마우스 버튼을 알 수 있습니다 :
/* 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! */ } });
-
4.당신은 또한의 ContextMenu 및 반환 false로 바인딩 할 수 있습니다 :
당신은 또한의 ContextMenu 및 반환 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/
CSTE 연구진 (...) 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/
-
5.
$("#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"); } });
-
6.
$.event.special.rightclick = { bindType: "contextmenu", delegateType: "contextmenu" }; $(document).on("rightclick", "div", function() { console.log("hello"); return false; });
http://jsfiddle.net/SRX3y/8/
-
7.이 아주 좋은 답변이 많이 있지만, 난 그냥 event.button를 사용하는 경우 IE9와 IE <9 사이의 한 가지 중요한 차이를 터치합니다.
이 아주 좋은 답변이 많이 있지만, 난 그냥 event.button를 사용하는 경우 IE9와 IE <9 사이의 한 가지 중요한 차이를 터치합니다.
event.button에 대한 기존의 마이크로 소프트 사양에 따라 코드는 W3C에서 사용하는 것과 다릅니다. W3C는 불과 3 사례를 고려한다 :
이전의 인터넷 익스플로러에서 그러나 마이크로 소프트는 눌러 진 버튼의 비트를 틀지하는 8 경우가 있습니다 :
이 작동하는 방법을 이론적으로 사실에도 불구하고, 더 Internet Explorer가 지금까지 동시에 누르면 두 개 또는 세 개의 버튼의 경우를 지원하지 않았다. W3C의 표준도 이론적으로이 기능을 지원 할 수 없기 때문에 나는 그것을 언급하고있다.
-
8.마을의 바보의 대답에 약간의 적응 청소기 될 것이라고 나에게 보인다
마을의 바보의 대답에 약간의 적응 청소기 될 것이라고 나에게 보인다
$('#element').bind('click', function(e) { if (e.button == 2) { alert("Right click"); } else { alert("Some other click"); } }
편집 : JQuery와 왼쪽, 가운데 1, 2, 3을 반환 e.which 속성을 제공, 오른쪽 각각 클릭합니다. 당신은 또한 경우 (e.which == 3) {경고 ( "오른쪽 클릭")를 사용할 수 있도록; }
참조 : 답변을 "중간 클릭을 사용하여 온 클릭 이벤트의 방아쇠"를
-
9.event.which === 1 개 보장하지만 그것은 (jQuery를 사용) 마우스 왼쪽 버튼을 클릭합니다.
event.which === 1 개 보장하지만 그것은 (jQuery를 사용) 마우스 왼쪽 버튼을 클릭합니다.
그러나 당신은 또한 수정 키에 대해 생각해야 : Ctrl 키 cmd를 시프트 고도
당신은 단지 간단한 잡기에 관심이 있다면, 수정되지 않은 왼쪽 클릭, 당신은 이런 식으로 뭔가를 할 수 :
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... } });
-
10.당신은 허용 "더 나은 자바 스크립트 마우스 이벤트"를 찾는 경우
당신은 허용 "더 나은 자바 스크립트 마우스 이벤트"를 찾는 경우
위의 이벤트를 트리거 및 두통 작업을 제거이 크로스 브라우저 일반 자바 스크립트에서보세요. 그냥 문서의
에 파일에 복사하여 스크립트의 머리에 붙여, 또는 그것을 포함한다. 그런 다음 바인딩하여 이벤트, 다음 코드 블록을 참조하는 쇼 보통의 자바 스크립트이 작품뿐만 아니라 바인딩 불구하고, 이벤트를 캡처하고 그들에 할당 된 기능을 발사 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)}();
-
11.
$("body").on({ click: function(){alert("left click");}, contextmenu: function(){alert("right click");} });
-
12.
$(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; } });
-
13.JQuery와 사용하면 이벤트 객체 유형을 사용할 수 있습니다
JQuery와 사용하면 이벤트 객체 유형을 사용할 수 있습니다
jQuery(".element").on("click contextmenu", function(e){ if(e.type == "contextmenu") { alert("Right click"); } });
-
14.있는 방법도있다, JQuery와하지 않고 그것을 할 수 있습니다!
있는 방법도있다, 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 } });
-
15.
$.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"); });
-
16.그들은 또는 바닐라 JS 또는 각도에 event.which을 사용하지 말아야하는 경우 그에게 궁금해하는 사람 : 그것은 지금 그렇게되지 않는 대신 event.buttons를 사용하여 선호합니다.
그들은 또는 바닐라 JS 또는 각도에 event.which을 사용하지 말아야하는 경우 그에게 궁금해하는 사람 : 그것은 지금 그렇게되지 않는 대신 event.buttons를 사용하여 선호합니다.
참고 :이 방법 (mousedown) 이벤트로 :
과 (와 mouseUp) 이벤트는 같은 숫자 있지만 대신 0을 반환하지 않습니다.
출처 : https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
-
17.
$.event.special.rightclick = { bindType: "contextmenu", delegateType: "contextmenu" }; $(document).on("rightclick", "div", function() { console.log("hello"); return false; });
from https://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
[JQUERY] 제출 페이지를 새로 고침 중지 양식 (0) | 2020.09.24 |
---|---|
[JQUERY] 어떻게 브라우저 창 닫기 이벤트를 캡처? (0) | 2020.09.24 |
[JQUERY] 모바일 jQuery를 동적으로 추가 된 콘텐츠의 마크 업 향상 (0) | 2020.09.24 |
[JQUERY] 이미지가 jQuery를 함께 (오류)를로드하지 않은 경우 확인 (0) | 2020.09.24 |
[JQUERY] ) ($ .when에 Deferreds의 배열에 전달 (0) | 2020.09.24 |