How to distinguish between left and right mouse click with jQuery

Question

How do you obtain the clicked mouse button using jQuery      div   bind  click   function        alert  clicked          this is triggered by both right and left click  what is the way of being able to catch right mouse click  I d be happy if something like below exists      div   bind  rightclick   function         alert  right mouse button is pressed

User · Answer

If you are looking for  Better Javascript Mouse Events  which allow for   left mousedown middle mousedown right mousedown left mouseup middle mouseup right mouseup left click middle click right click mousewheel up mousewheel down   Have a look at this cross browser normal javascript which triggers the above events  and removes the headache work  Just copy and paste it into the head of your script  or include it in a file in the  lt head gt  of your document  Then bind your events  refer to the next code block below which shows a jquery example of capturing the events and firing the functions assigned to them  though this works with normal javascript binding as well   If your interested in seeing it work  have a look at the 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  lt  2     left      e button    4     middle     right                  else                   button    e which  lt  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           Better Mouse Click Events Example  uses jquery for simplicity  but the above will work cross browser and fire the same event names  IE uses on before the names    lt div id  Test  gt  lt  div gt   lt script type  text javascript  gt          Test   on  mouseup  function e    this  append e type   lt br   gt                      on  mouseup left  function e    this  append e type   lt br   gt                      on  mouseup middle  function e    this  append e type   lt br   gt                      on  mouseup right  function e    this  append e type   lt br   gt                       on  click  function e    this  append e type   lt br   gt                      on  click left  function e    this  append e type   lt br   gt                      on  click middle  function e    this  append e type   lt br   gt                      on  click right  function e    this  append e type   lt br   gt                       on  mousedown  function e    this  html     append e type   lt br   gt                      on  mousedown left  function e    this  append e type   lt br   gt                      on  mousedown middle  function e    this  append e type   lt br   gt                      on  mousedown right  function e    this  append e type   lt br   gt                       on  mousewheel  function e    this  append e type   lt br   gt                      on  mousewheel up  function e    this  append e type   lt br   gt                      on  mousewheel down  function e    this  append e type   lt br   gt                        lt  script gt    And for those who are in need of the minified version      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 lt 2  left  4  e button  middle   right  e which lt 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 amp  amp  c  click    DOMMouseScroll   e type amp  amp  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

User · Answer

event which     1 ensures it s a left-click  when using jQuery    But you should also think about modifier keys  ctrlcmdshiftalt  If you re only interested in catching simple  unmodified left-clicks  you can do something like this   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

User · Answer

body   on       click  function   alert  left click          contextmenu  function   alert  right click

User · Answer

There are a lot of very good answers  but I just want to touch on one major difference between IE9 and IE  lt  9 when using event button   According to the old Microsoft specification for event button the codes differ from the ones used by W3C  W3C considers only 3 cases     Left mouse button is clicked - event button     1 Right mouse button is clicked - event button     3 Middle mouse button is clicked - event button     2   In older Internet Explorers however Microsoft are flipping a bit for the pressed button and there are 8 cases    No button is clicked - event button     0 or 000 Left button is clicked - event button     1 or 001 Right button is clicked - event button     2 or 010 Left and right buttons are clicked - event button     3 or 011 Middle button is clicked - event button     4 or 100 Middle and left buttons are clicked - event button     5 or 101 Middle and right buttons are clicked - event button     6 or 110 All 3 buttons are clicked - event button     7 or 111   Despite the fact that this is theoretically how it should work  no Internet Explorer has ever supported the cases of two or three buttons simultaneously pressed  I am mentioning it because the W3C standard cannot even theoretically support this

User · Answer

Edit  I changed it to work for dynamically added elements using  on   in jQuery 1 7 or above     document  on  contextmenu     element   function e      alert  Context Menu event has fired        return false        Demo  jsfiddle net Kn9s7 5   Start of original post  This is what worked for me       element   bind  contextmenu  function e      alert  Context Menu event has fired        return false         In case you are into multiple solutions     Edit  Tim Down brings up a good point that it s not always going to be a right-click that fires the contextmenu event  but also when the context menu key is pressed  which is arguably a replacement for a right-click

User · Answer

You can easily tell which mouse button was pressed by checking the which property of the event object on mouse events        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

User · Answer

As of jQuery version 1 1 3  event which normalizes event keyCode and event charCode so you don t have to worry about browser compatibility issues  Documentation on event which  event which will give 1  2 or 3 for left  middle and right mouse buttons respectively so       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

User · Answer

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

User · Answer

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

User · Answer

With jquery you can use event object type  jQuery   element   on  click contextmenu   function e      if e type     contextmenu            alert  Right click

User · Answer

To those who are wondering if they should or not use event which in vanilla JS or Angular   It s now deprecated so prefer using event buttons instead   Note   With this method and  mousedown  event    left click press is associated to 1 right click press is associated to 2 scroll button press is associated with 4   and  mouseup  event will NOT return the same numbers but 0 instead   Source   https   developer mozilla org en-US docs Web API MouseEvent buttons

User · Answer

event special rightclick          bindType   contextmenu           delegateType   contextmenu                 document  on  rightclick    div   function        console log  hello        return false

User · Answer

It seems to me that a slight adaptation of TheVillageIdiot s answer would be cleaner       element   bind  click   function e      if  e button    2        alert  Right click          else       alert  Some other click            EDIT  JQuery provides an e which attribute  returning 1  2  3 for left  middle  and right click respectively  So you could also use if  e which    3    alert  right click       See also  answers to  Triggering onclick event using middle click

User · Answer

element   live  click   function e      if      browser msie  amp  amp  e button    0        browser msie  amp  amp  e button    1             alert  Left Button              else if e button    2          alert  Right Button                  Update for the current state of the things    x000D   x000D  var  log      div log    x000D     div target   on  mousedown   function     x000D     log text  Which      event which   x000D    if  event which     1    x000D        this  removeClass  right middle   addClass  left    x000D      else if  event which     2    x000D        this  removeClass  left right   addClass  middle    x000D      else if  event which     3    x000D        this  removeClass  left middle   addClass  right    x000D      x000D      x000D  div target   x000D    border  1px solid blue  x000D    height  100px  x000D    width  100px  x000D    x000D   x000D  div target left   x000D    background-color   0faf3d  x000D    x000D   x000D  div target right   x000D    background-color   f093df  x000D    x000D   x000D  div target middle   x000D    background-color   00afd3  x000D    x000D   x000D  div log   x000D    text-align  left  x000D    color   f00  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  target  gt  lt  div gt  x000D   lt div class  log  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You can also bind to contextmenu and return false      selector   bind  contextmenu   function e       e preventDefault          code     return false        Demo  http   jsfiddle net maniator WS9S2   Or you can make a quick plugin that does the same    function            fn rightClick   function method           this  bind  contextmenu rightclick   function e           e preventDefault            method            return false                    jQuery      Demo  http   jsfiddle net maniator WS9S2 2     Using  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    Demo  http   jsfiddle net maniator WS9S2 283

User · Answer

event special rightclick         bindType   contextmenu       delegateType   contextmenu        document  on  rightclick    div   function         console log  hello        return false        http   jsfiddle net SRX3y 8

User · Answer

there is also a way  to do it without JQuery   check out this   document addEventListener  mousedown   function evt        switch evt buttons          case 1     left mouse       case 2     right mouse       case 3     middle mouse  lt - I didn t tested that  I just got a touchpad

[javascript] How to distinguish between left and right mouse click with jQuery

Examples related to javascript

Examples related to jquery

Examples related to jquery-events

Examples related to right-click