JQuery ilə sol və sağ siçan klikini necə ayırmaq olar?

JQuery ilə basılan siçan düyməsini necə əldə edirsiniz?

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

sağ və sol kliklə işləyir, sağ klikləmənin yolu nədir? Aşağıdakı kimi bir şey varsa şad olardı:

 $('div').bind('rightclick', function(){ alert('right mouse button is pressed'); }); 
519
30 июля '09 в 15:11 2009-07-30 15:11 Sinan , 30 İyul 2009 tarixində 15:11 'de yapılıyor
@ 16 cavab

JQuery versiyası 1.1.3-də olduğu kimi, event.keyCodeevent.which normallaşdırır. event.charCode , brauzerinizin uyğunluğu məsələləri ilə bağlı narahatlığınız yoxdur. event.which üçün event.which

sol, orta və sağ siçan düymələri üçün 1, 2 və ya 3 verəcək.

 $('#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!'); } }); 
811
28 апр. Cavab Acorn 28 apr verilir . 2010-04-28 02:52 '10 at 2:52 2010-04-28 02:52

Change . JQuery 1.7 və ya daha yüksək olaraq .on() istifadə edərək, dinamik şəkildə əlavə elementlərlə işləmək üçün onu dəyişdirdim:

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

Demo: jsfiddle.net/Kn9s7/5

[Orijinal mesajın başlanğıcı] Bu mənim üçün işləyirdi:

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

Bir çox həlli ^^ istifadə edirsinizsə

Düzenle : Tim Down, həmişə contextmenu hadisəsini tetikleyen right-click contextmenu olmayacağını, həm də kontekst menyusu düyməsini basaraq ( right-click üçün əvəz olan)

237
11 февр. Cavab 11 fevralda Jeff Hines tərəfindən verilir. 2011-02-11 01:16 '11 at 1:16 2011-02-11 01:16

Siçan hadisələrində hadisə obyektinin əmlakını yoxlamaqla hansı siçan düyməsini basıldığını asanlıqla söyləyə bilərsiniz:

  $([selector]).mousedown(function(e) { if (e.which === 3) {  } }); 
78
30 окт. Cavab Russ Cam 30 oktyabrda verilir . 2009-10-30 01:20 '09 at 1:20 'da 2009-10-30 01:20

Ayrıca contextmenu bindreturn false :

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

Demo: http://jsfiddle.net/maniator/WS9S2/

Yoxsa eyni şeyi edən sürətli bir plugin edə bilərsiniz:

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

Demo: http://jsfiddle.net/maniator/WS9S2/2/


.on(...) istifadə edərək 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. 

Demo: http://jsfiddle.net/maniator/WS9S2/283/

37
13 дек. Cavab Neal 13 dekabr tərəfindən verilir . 2011-12-13 18:26 '11 at 18:26 2011-12-13 18:26

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

Strike>

İşlərin vəziyyətini güncəlləşdirin:

 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; } 
29
30 июля '09 в 15:18 2009-07-30 15:18 Cavab TheVillageIdiot tərəfindən 30 iyul '09 saat 15:18 'də verildi. 2009-07-30 15:18
 $.event.special.rightclick = { bindType: "contextmenu", delegateType: "contextmenu" }; $(document).on("rightclick", "div", function() { console.log("hello"); return false; }); 

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

18
14 авг. Cavab Esailija 14 aug verilir . 2012-08-14 16:09 '12 at 4:09 pm 2012-08-14 16:09

Çox yaxşı cavablar var, amma event.button istifadə edərkən yalnız IE9 və IE <9 arasında bir böyük fərqə toxunmaq event.button .

Hadisə üçün keçmiş Microsoft spesifikasiyasına uyğun olaraq kodlar W3C tərəfindən istifadə olunanlardan fərqlənir. W3C yalnız 3 hal nəzərdə tutur:

  • Sol siçan düyməsini basın - event.button === 1
  • Sağ basın - event.button === 3
  • Orta siçan düyməsini basıldı - event.button === 2

Daha yaşlı İnternet tədqiqatçılarında isə Microsoft bir az düyməni atır və 8 halda var:

  • Button event.button === 0 - event.button === 0 və ya 000
  • Sol düyməni basın - event.button === 1 və ya 001
  • Sağ düyməni basın - event.button === 2 və ya 010
  • Sol və sağ düymələri basın - event.button === 3 və ya 011
  • Orta düyməni basdı - event.button === 4 və ya 100
  • Orta və sol düymələrə event.button === 5 - event.button === 5 və ya 101
  • Orta və sağ düymələrin düymələri basılır - event.button === 6 və ya 110
  • Bütün 3 düyməni basdı - event.button === 7 və ya 111

Bu nəzəri cəhətdən işləməlidir, baxmayaraq ki, Internet Explorer iki və ya üç düyməni eyni anda basdırmaqla heç vaxt dəstək vermədi. Bunu qeyd edirəm, çünki W3C standartı hətta nəzəri olaraq bilmir.

14
26 окт. Konstantin Dinevin cavabını 26 okt . 2012-10-26 17:31 '12 at 17:31 2012-10-26 17:31

Mənə göründü ki, TheVillageIdiot cavabının kiçik bir uyğunlaşması daha təmiz olacaq:

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

EDIT: JQuery, sırasıyla sol, orta və sağ tıklamalar üçün 1, 2, 3 e.which özniteliği təmin edir. Beləliklə, if (e.which == 3) { alert("right click"); } də istifadə edə bilərsiniz if (e.which == 3) { alert("right click"); } if (e.which == 3) { alert("right click"); }

Həmçinin baxın: "Orta basını istifadə edərək onclick hadisə başla"

8
18 дек. Cavab Dan Burton 18 dekabr 2009-12-18 21:49 '09 at 9:49 PM 2009-12-18 21:49

event.which === 1 jQuery istifadə edərkən sol siçan düyməsini ilə tıklandığını təmin edir.

Amma modifier düymələri haqqında düşünmək lazımdır: ctrl cmd shift alt

Yalnız sadə, dəyişdirilməmiş bir sol kliklə maraqlanırsan, belə bir şey edə bilərsiniz:

 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... } }); 
4
08 мая '14 в 13:25 2014-05-08 13:25 cavab 08 May '14 'də saat 13:25' də verilir

Əgər "Top Javascript Mouse Hadisələr" izləyənlər üçün axtarırsan

  • sol mousedown
  • orta kənd
  • sağ mousedown
  • sol siçan düyməsini basın
  • orta siçan
  • sağ siçan düyməsini basın
  • sol klikləyin
  • orta klik
  • sağ klikləyin
  • mousewheel up
  • mousewheel aşağı

Yuxarıdakı hadisələri işə salan və baş ağrısı ilə işi rədd edən bu müntəzəm JavaScript brauzerinə baxın. Sadəcə kopyalayın və skriptinizin başlığına yapışdırın və ya sənədinizin <head> içindəki faylda daxil <head> . Sonra hadisələrinizi birləşdirin, növbəti kod blokuna baxın, aşağıda jquery bir hadisəni tutmaq və onlara təyin edilmiş funksiyaları aktivləşdirmək üçün nümunədir.

Bunun necə işlədiyini merak ediyorsanız, jsFiddle'e baxın: https://jsfiddle.net/BNefn/

  (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)}};  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);  var MouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"; addEvent(window, MouseWheelEvent, GetMouseButton); })(); 

Daha yaxşı siçan "Event Example" (rahatlıq üçün, jquery sadəcə istifadə olunur, lakin cross-brauzer yuxarıda işləyəcək və IE adları əvvəl istifadə edən eyni hadisə adları çalıştırın)

 <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> 

Və qısaldılmış bir versiyaya ehtiyacı olanlar üçün ...

 !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 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
31 дек. Cavab NinjaKC tərəfindən verilir 31 dekabr. 2015-12-31 13:50 '16 saat 13:50 'da, 2015-12-31 13:50
 $.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
23 марта '17 в 1:52 2017-03-23 01:52 Cavab 23.03.2014 tarixində 1:52 2017-03-23 ​​01:52 istifadəçi tərəfindən verilir

jQuery olmadan bunu etmək üçün bir yol var!

oxuyun:

 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 } }); 
0
04 авг. Paul Scharnofske tərəfindən verilmiş cavab 04 Aug 2015-08-04 05:17 '15 'da 5:17' de
 $(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; } }); 
0
30 апр. Cavab 30 aprel tarixində user2335866 tərəfindən verilir 2013-04-30 15:37 '13 saat 15:37 'da 2013-04-30 15:37

Jquery ilə, event object type istifadə edə bilərsiniz

 jQuery(".element").on("click contextmenu", function(e){ if(e.type == "contextmenu") { alert("Right click"); } }); 
0
22 апр. KeepMove-a verilən cavab 22 aprel 2015-04-22 08:20 '15 at 8:20 'də 2015-04-22 08:20
  $.event.special.rightclick = { bindType: "contextmenu", delegateType: "contextmenu" }; $(document).on("rightclick", "div", function() { console.log("hello"); return false; }); 
-1
24 июня '14 в 14:14 2014-06-24 14:14 cavab 24 iyun 'da 14:14' də Yip Man WingChun tərəfindən verilir. 2014-06-24 14:14
 $("body").on({ click: function(){alert("left click");}, contextmenu: function(){alert("right click");} }); 
-1
25 окт. cavab AK 25 oktyabr verilir . 2017-10-25 00:38 '17 'də 0:38 2017-10-25 00:38' da

yazıları ilə bağlı digər suallar və ya sual verin