JavaScript Check if mouse button down

Question

Is there a way to detect if a mouse button is currently down in JavaScript   I know about the  mousedown  event  but that s not what I need   Some time AFTER the mouse button is pressed  I want to be able to detect if it is still pressed down   Is this possible

User · Answer

You can combine  Pax and my answers to also get the duration that the mouse has been down for   var mousedownTimeout      mousedown   0   document body onmousedown   function       mousedown   0     window clearInterval mousedownTimeout     mousedownTimeout   window setInterval function     mousedown    200    200      document body onmouseup   function       mousedown   0    window clearInterval mousedownTimeout       Then later   if  mousedown  gt   2000         do something if the mousebutton has been down for at least 2 seconds

User · Answer

Short and sweet  I m not sure why none of the previous answers worked for me  but I came up with this solution during a eureka moment  It not only works  but it is also most elegant   Add to body tag   onmouseup  down 0   onmousedown  down 1     Then test and execute myfunction   if down equals 1   onmousemove  if  down  1  myfunction

User · Answer

You need to handle the MouseDown and MouseUp and set some flag or something to track it  later down the road

User · Answer

You can combine  Pax and my answers to also get the duration that the mouse has been down for   var mousedownTimeout      mousedown   0   document body onmousedown   function       mousedown   0     window clearInterval mousedownTimeout     mousedownTimeout   window setInterval function     mousedown    200    200      document body onmouseup   function       mousedown   0    window clearInterval mousedownTimeout       Then later   if  mousedown  gt   2000         do something if the mousebutton has been down for at least 2 seconds

User · Answer

Well  you can t check if it s down after the event  but you can check if it s Up    If it s up   it means that no longer is down  P lol  So the user presses the button down  onMouseDown event      and after that  you check if is up  onMouseUp   While it s not up  you can do what you need

User · Answer

I know this is an old post  but I thought the tracking of mouse button using mouse up down felt a bit clunky  so I found an alternative that may appeal to some    lt style gt      div myDiv active           cursor  default         lt  style gt    lt script gt      function handleMove  div             var style   getComputedStyle  div            if  style getPropertyValue  cursor       default                            You re down and moving here                   lt  script gt    lt div class  myDiv  onmousemove  handleMove this    gt Click and drag me  lt  div gt    The  active selector handles the mouse click much better than mouse up down  you just need a way of reading that state in the onmousemove event  For that I needed to cheat and relied on the fact that the default cursor is  auto  and I just change it to  default   which is what auto selects by default   You can use anything in the object that is returned by getComputedStyle that you can use as a flag without upsetting the look of your page e g  border-color   I would have liked to set my own user defined style in the  active section  but I couldn t get that to work  It would be better if it s possible

User · Answer

You need to handle the MouseDown and MouseUp and set some flag or something to track it  later down the road

User · Answer

The following snippet will attempt to execute the  doStuff  function 2 seconds after the mouseDown event occurs in document body   If the user lifts up the button  the mouseUp event will occur and cancel the delayed execution   I d advise using some method for cross-browser event attachment - setting the mousedown and mouseup properties explicitly was done to simplify the example     function doStuff          does something when mouse is down in body for longer than 2 seconds    var mousedownTimeout   document body onmousedown   function        mousedownTimeout   window setTimeout doStuff  2000      document body onmouseup   function       window clearTimeout mousedownTimeout

User · Answer

You need to handle the MouseDown and MouseUp and set some flag or something to track it  later down the road

User · Answer

You can combine  Pax and my answers to also get the duration that the mouse has been down for   var mousedownTimeout      mousedown   0   document body onmousedown   function       mousedown   0     window clearInterval mousedownTimeout     mousedownTimeout   window setInterval function     mousedown    200    200      document body onmouseup   function       mousedown   0    window clearInterval mousedownTimeout       Then later   if  mousedown  gt   2000         do something if the mousebutton has been down for at least 2 seconds

User · Answer

I think the best approach to this is to keep your own record of the mouse button state  as follows   var mouseDown   0  document body onmousedown   function          mouseDown   1    document body onmouseup   function         mouseDown   0      and then  later in your code   if  mouseDown    1           the mouse is down  do what you have to do

User · Answer

The following snippet will attempt to execute the  doStuff  function 2 seconds after the mouseDown event occurs in document body   If the user lifts up the button  the mouseUp event will occur and cancel the delayed execution   I d advise using some method for cross-browser event attachment - setting the mousedown and mouseup properties explicitly was done to simplify the example     function doStuff          does something when mouse is down in body for longer than 2 seconds    var mousedownTimeout   document body onmousedown   function        mousedownTimeout   window setTimeout doStuff  2000      document body onmouseup   function       window clearTimeout mousedownTimeout

User · Answer

As said  Jack  when mouseup happens outside of browser window  we are not aware of it     This code  almost  worked for me   window addEventListener  mouseup   mouseUpHandler  false   window addEventListener  mousedown   mouseDownHandler  false     Unfortunately  I won t get the mouseup event in one of those cases    user simultaneously presses a keyboard key and a mouse button  releases mouse button outside of browser window then releases key  user presses two mouse buttons simultaneously  releases one mouse button then the other one  both outside of browser window

User · Answer

The following snippet will attempt to execute the  doStuff  function 2 seconds after the mouseDown event occurs in document body   If the user lifts up the button  the mouseUp event will occur and cancel the delayed execution   I d advise using some method for cross-browser event attachment - setting the mousedown and mouseup properties explicitly was done to simplify the example     function doStuff          does something when mouse is down in body for longer than 2 seconds    var mousedownTimeout   document body onmousedown   function        mousedownTimeout   window setTimeout doStuff  2000      document body onmouseup   function       window clearTimeout mousedownTimeout

User · Answer

Regarding Pax  solution  it doesn t work if user clicks more than one button intentionally or accidentally  Don t ask me how I know  -    The correct code should be like that   var mouseDown   0  document body onmousedown   function          mouseDown    document body onmouseup   function       --mouseDown      With the test like this   if mouseDown        crikey  isn t she a beauty      If you want to know what button is pressed  be prepared to make mouseDown an array of counters and count them separately for separate buttons      let s pretend that a mouse doesn t have more than 9 buttons var mouseDown    0  0  0  0  0  0  0  0  0       mouseDownCount   0  document body onmousedown   function evt         mouseDown evt button       mouseDownCount    document body onmouseup   function evt      --mouseDown evt button     --mouseDownCount      Now you can check what buttons were pressed exactly   if mouseDownCount        alright  let s lift the little bugger up    for var i   0  i  lt  mouseDown length    i       if mouseDown i             we found it right there                Now be warned that the code above would work only for standard-compliant browsers that pass you a button number starting from 0 and up  IE uses a bit mask of currently pressed buttons    0 for  nothing is pressed  1 for left 2 for right 4 for middle and any combination of above  e g   5 for left   middle   So adjust your code accordingly  I leave it as an exercise   And remember  IE uses a global event object called  hellip   event    Incidentally IE has a feature useful in your case  when other browsers send  button  only for mouse button events  onclick  onmousedown  and onmouseup   IE sends it with onmousemove too  So you can start listening for onmousemove when you need to know the button state  and check for evt button as soon as you got it  mdash  now you know what mouse buttons were pressed      for IE only  document body onmousemove   function      if event button          aha  we caught a feisty little sheila           Of course you get nothing if she plays dead and not moving   Relevant links    MouseEvent s button  DOM 2  MSDN s button   Update  1  I don t know why I carried over the document body-style of code  It will be better to attach event handlers directly to the document

User · Answer

This is an old question  and the answers here seem to mostly advocate for using mousedown and mouseup to keep track of whether a button is pressed  But as others have pointed out  mouseup will only fire when performed within the browser  which can lead to losing track of the button state   However  MouseEvent  now  indicates which buttons are currently pushed    For all modern browsers  except Safari  use MouseEvent buttons For Safari  use MouseEvent which  buttons will be undefined for Safari  Note  which uses different numbers from buttons for Right and Middle clicks    When registered on document  mousemove will fire immediately as soon as the cursor reenters the browser  so if the user releases outside then the state will be updated as soon as they mouse back inside   A simple implementation might look like   var leftMouseButtonOnlyDown   false   function setLeftButtonState e      leftMouseButtonOnlyDown   e buttons     undefined        e which     1        e buttons     1     document body onmousedown   setLeftButtonState  document body onmousemove   setLeftButtonState  document body onmouseup   setLeftButtonState    If more complicated scenarios are required  different buttons multiple buttons control keys   check out the MouseEvent docs  When if Safari lifts its game  this should get easier

User · Answer

I think the best approach to this is to keep your own record of the mouse button state  as follows   var mouseDown   0  document body onmousedown   function          mouseDown   1    document body onmouseup   function         mouseDown   0      and then  later in your code   if  mouseDown    1           the mouse is down  do what you have to do

User · Answer

Below jQuery example  when mouse is over     element    color is changing depending on which mouse button is pressed   var clicableArea         init  function              var self   this             element   mouseover function  e                self handlemouseClick e    this               mousedown function  e                self handlemouseClick e    this                           handlemouseClick  function  e  element            if  e buttons     1     left button             element css  background     f00                      if  e buttons     2      right buttom             element css  background    none                         document  ready function          clicableArea init

User · Answer

Regarding Pax  solution  it doesn t work if user clicks more than one button intentionally or accidentally  Don t ask me how I know  -    The correct code should be like that   var mouseDown   0  document body onmousedown   function          mouseDown    document body onmouseup   function       --mouseDown      With the test like this   if mouseDown        crikey  isn t she a beauty      If you want to know what button is pressed  be prepared to make mouseDown an array of counters and count them separately for separate buttons      let s pretend that a mouse doesn t have more than 9 buttons var mouseDown    0  0  0  0  0  0  0  0  0       mouseDownCount   0  document body onmousedown   function evt         mouseDown evt button       mouseDownCount    document body onmouseup   function evt      --mouseDown evt button     --mouseDownCount      Now you can check what buttons were pressed exactly   if mouseDownCount        alright  let s lift the little bugger up    for var i   0  i  lt  mouseDown length    i       if mouseDown i             we found it right there                Now be warned that the code above would work only for standard-compliant browsers that pass you a button number starting from 0 and up  IE uses a bit mask of currently pressed buttons    0 for  nothing is pressed  1 for left 2 for right 4 for middle and any combination of above  e g   5 for left   middle   So adjust your code accordingly  I leave it as an exercise   And remember  IE uses a global event object called  hellip   event    Incidentally IE has a feature useful in your case  when other browsers send  button  only for mouse button events  onclick  onmousedown  and onmouseup   IE sends it with onmousemove too  So you can start listening for onmousemove when you need to know the button state  and check for evt button as soon as you got it  mdash  now you know what mouse buttons were pressed      for IE only  document body onmousemove   function      if event button          aha  we caught a feisty little sheila           Of course you get nothing if she plays dead and not moving   Relevant links    MouseEvent s button  DOM 2  MSDN s button   Update  1  I don t know why I carried over the document body-style of code  It will be better to attach event handlers directly to the document

User · Answer

var mousedown   0            function                document onmousedown   function e                   mousedown   mousedown   getWindowStyleButton e                   e   e    window event                  console log  Button      e button     Which      e which     MouseDown      mousedown                              document onmouseup   function e                   mousedown   mousedown   getWindowStyleButton e                   e   e    window event                  console log  Button      e button     Which      e which     MouseDown      mousedown                              document oncontextmenu   function e                      to suppress oncontextmenu because it blocks                    a mouseup when two buttons are pressed and                     the right-mouse button is released before                    the other button                  return false                                     function getWindowStyleButton e               var button   0                  if  e                        if  e button     0  button   1                      else if  e button     1  button   4                      else if  e button     2  button   2                     else if  window event                       button   window event button                                return button              this cross-browser version works fine for me

User · Answer

As said  Jack  when mouseup happens outside of browser window  we are not aware of it     This code  almost  worked for me   window addEventListener  mouseup   mouseUpHandler  false   window addEventListener  mousedown   mouseDownHandler  false     Unfortunately  I won t get the mouseup event in one of those cases    user simultaneously presses a keyboard key and a mouse button  releases mouse button outside of browser window then releases key  user presses two mouse buttons simultaneously  releases one mouse button then the other one  both outside of browser window

User · Answer

I know this is an old post  but I thought the tracking of mouse button using mouse up down felt a bit clunky  so I found an alternative that may appeal to some    lt style gt      div myDiv active           cursor  default         lt  style gt    lt script gt      function handleMove  div             var style   getComputedStyle  div            if  style getPropertyValue  cursor       default                            You re down and moving here                   lt  script gt    lt div class  myDiv  onmousemove  handleMove this    gt Click and drag me  lt  div gt    The  active selector handles the mouse click much better than mouse up down  you just need a way of reading that state in the onmousemove event  For that I needed to cheat and relied on the fact that the default cursor is  auto  and I just change it to  default   which is what auto selects by default   You can use anything in the object that is returned by getComputedStyle that you can use as a flag without upsetting the look of your page e g  border-color   I would have liked to set my own user defined style in the  active section  but I couldn t get that to work  It would be better if it s possible

User · Answer

Well  you can t check if it s down after the event  but you can check if it s Up    If it s up   it means that no longer is down  P lol  So the user presses the button down  onMouseDown event      and after that  you check if is up  onMouseUp   While it s not up  you can do what you need

User · Answer

If you re working within a complex page with existing mouse event handlers  I d recommend handling the event on capture  instead of bubble   To do this  just set the 3rd parameter of addEventListener to true   Additionally  you may want to check for event which to ensure you re handling actual user interaction and not mouse events  e g  elem dispatchEvent new Event  mousedown      var isMouseDown   false   document addEventListener  mousedown   function event         if   event which   isMouseDown   true     true    document addEventListener  mouseup   function event         if   event which   isMouseDown   false     true     Add the handler to document  or window  instead of document body is important b c it ensures that mouseup events outside of the window are still recorded

User · Answer

var mousedown   0            function                document onmousedown   function e                   mousedown   mousedown   getWindowStyleButton e                   e   e    window event                  console log  Button      e button     Which      e which     MouseDown      mousedown                              document onmouseup   function e                   mousedown   mousedown   getWindowStyleButton e                   e   e    window event                  console log  Button      e button     Which      e which     MouseDown      mousedown                              document oncontextmenu   function e                      to suppress oncontextmenu because it blocks                    a mouseup when two buttons are pressed and                     the right-mouse button is released before                    the other button                  return false                                     function getWindowStyleButton e               var button   0                  if  e                        if  e button     0  button   1                      else if  e button     1  button   4                      else if  e button     2  button   2                     else if  window event                       button   window event button                                return button              this cross-browser version works fine for me

User · Answer

Short and sweet  I m not sure why none of the previous answers worked for me  but I came up with this solution during a eureka moment  It not only works  but it is also most elegant   Add to body tag   onmouseup  down 0   onmousedown  down 1     Then test and execute myfunction   if down equals 1   onmousemove  if  down  1  myfunction

User · Answer

Below jQuery example  when mouse is over     element    color is changing depending on which mouse button is pressed   var clicableArea         init  function              var self   this             element   mouseover function  e                self handlemouseClick e    this               mousedown function  e                self handlemouseClick e    this                           handlemouseClick  function  e  element            if  e buttons     1     left button             element css  background     f00                      if  e buttons     2      right buttom             element css  background    none                         document  ready function          clicableArea init

User · Answer

Regarding Pax  solution  it doesn t work if user clicks more than one button intentionally or accidentally  Don t ask me how I know  -    The correct code should be like that   var mouseDown   0  document body onmousedown   function          mouseDown    document body onmouseup   function       --mouseDown      With the test like this   if mouseDown        crikey  isn t she a beauty      If you want to know what button is pressed  be prepared to make mouseDown an array of counters and count them separately for separate buttons      let s pretend that a mouse doesn t have more than 9 buttons var mouseDown    0  0  0  0  0  0  0  0  0       mouseDownCount   0  document body onmousedown   function evt         mouseDown evt button       mouseDownCount    document body onmouseup   function evt      --mouseDown evt button     --mouseDownCount      Now you can check what buttons were pressed exactly   if mouseDownCount        alright  let s lift the little bugger up    for var i   0  i  lt  mouseDown length    i       if mouseDown i             we found it right there                Now be warned that the code above would work only for standard-compliant browsers that pass you a button number starting from 0 and up  IE uses a bit mask of currently pressed buttons    0 for  nothing is pressed  1 for left 2 for right 4 for middle and any combination of above  e g   5 for left   middle   So adjust your code accordingly  I leave it as an exercise   And remember  IE uses a global event object called  hellip   event    Incidentally IE has a feature useful in your case  when other browsers send  button  only for mouse button events  onclick  onmousedown  and onmouseup   IE sends it with onmousemove too  So you can start listening for onmousemove when you need to know the button state  and check for evt button as soon as you got it  mdash  now you know what mouse buttons were pressed      for IE only  document body onmousemove   function      if event button          aha  we caught a feisty little sheila           Of course you get nothing if she plays dead and not moving   Relevant links    MouseEvent s button  DOM 2  MSDN s button   Update  1  I don t know why I carried over the document body-style of code  It will be better to attach event handlers directly to the document

User · Answer

You need to handle the MouseDown and MouseUp and set some flag or something to track it  later down the road

User · Answer

Regarding Pax  solution  it doesn t work if user clicks more than one button intentionally or accidentally  Don t ask me how I know  -    The correct code should be like that   var mouseDown   0  document body onmousedown   function          mouseDown    document body onmouseup   function       --mouseDown      With the test like this   if mouseDown        crikey  isn t she a beauty      If you want to know what button is pressed  be prepared to make mouseDown an array of counters and count them separately for separate buttons      let s pretend that a mouse doesn t have more than 9 buttons var mouseDown    0  0  0  0  0  0  0  0  0       mouseDownCount   0  document body onmousedown   function evt         mouseDown evt button       mouseDownCount    document body onmouseup   function evt      --mouseDown evt button     --mouseDownCount      Now you can check what buttons were pressed exactly   if mouseDownCount        alright  let s lift the little bugger up    for var i   0  i  lt  mouseDown length    i       if mouseDown i             we found it right there                Now be warned that the code above would work only for standard-compliant browsers that pass you a button number starting from 0 and up  IE uses a bit mask of currently pressed buttons    0 for  nothing is pressed  1 for left 2 for right 4 for middle and any combination of above  e g   5 for left   middle   So adjust your code accordingly  I leave it as an exercise   And remember  IE uses a global event object called  hellip   event    Incidentally IE has a feature useful in your case  when other browsers send  button  only for mouse button events  onclick  onmousedown  and onmouseup   IE sends it with onmousemove too  So you can start listening for onmousemove when you need to know the button state  and check for evt button as soon as you got it  mdash  now you know what mouse buttons were pressed      for IE only  document body onmousemove   function      if event button          aha  we caught a feisty little sheila           Of course you get nothing if she plays dead and not moving   Relevant links    MouseEvent s button  DOM 2  MSDN s button   Update  1  I don t know why I carried over the document body-style of code  It will be better to attach event handlers directly to the document

User · Answer

Using the MouseEvent api  to check the pressed button  if any    x000D   x000D  document addEventListener  mousedown    e    gt  console log e buttons   x000D   x000D   x000D    Return      A number representing one or more buttons  For more than one button   pressed simultaneously  the values are combined  e g   3 is primary     secondary    0   No button or un-initialized 1   Primary button  usually the left button  2   Secondary button  usually the right button  4   Auxilary button  usually the mouse wheel button or middle button  8   4th button  typically the  Browser Back  button  16   5th button  typically the  Browser Forward  button

User · Answer

Using the MouseEvent api  to check the pressed button  if any    x000D   x000D  document addEventListener  mousedown    e    gt  console log e buttons   x000D   x000D   x000D    Return      A number representing one or more buttons  For more than one button   pressed simultaneously  the values are combined  e g   3 is primary     secondary    0   No button or un-initialized 1   Primary button  usually the left button  2   Secondary button  usually the right button  4   Auxilary button  usually the mouse wheel button or middle button  8   4th button  typically the  Browser Back  button  16   5th button  typically the  Browser Forward  button

User · Answer

If you re working within a complex page with existing mouse event handlers  I d recommend handling the event on capture  instead of bubble   To do this  just set the 3rd parameter of addEventListener to true   Additionally  you may want to check for event which to ensure you re handling actual user interaction and not mouse events  e g  elem dispatchEvent new Event  mousedown      var isMouseDown   false   document addEventListener  mousedown   function event         if   event which   isMouseDown   true     true    document addEventListener  mouseup   function event         if   event which   isMouseDown   false     true     Add the handler to document  or window  instead of document body is important b c it ensures that mouseup events outside of the window are still recorded

User · Answer

Using jQuery  the following solution handles even the  drag off the page then release case      document  mousedown function e        mouseDown   true     mouseup function e        mouseDown   false     mouseleave function e        mouseDown   false        I don t know how it handles multiple mouse buttons  If there were a way to start the click outside the window  then bring the mouse into the window  then this would probably not work properly there either

User · Answer

I think the best approach to this is to keep your own record of the mouse button state  as follows   var mouseDown   0  document body onmousedown   function          mouseDown   1    document body onmouseup   function         mouseDown   0      and then  later in your code   if  mouseDown    1           the mouse is down  do what you have to do

User · Answer

Well  you can t check if it s down after the event  but you can check if it s Up    If it s up   it means that no longer is down  P lol  So the user presses the button down  onMouseDown event      and after that  you check if is up  onMouseUp   While it s not up  you can do what you need

User · Answer

This is an old question  and the answers here seem to mostly advocate for using mousedown and mouseup to keep track of whether a button is pressed  But as others have pointed out  mouseup will only fire when performed within the browser  which can lead to losing track of the button state   However  MouseEvent  now  indicates which buttons are currently pushed    For all modern browsers  except Safari  use MouseEvent buttons For Safari  use MouseEvent which  buttons will be undefined for Safari  Note  which uses different numbers from buttons for Right and Middle clicks    When registered on document  mousemove will fire immediately as soon as the cursor reenters the browser  so if the user releases outside then the state will be updated as soon as they mouse back inside   A simple implementation might look like   var leftMouseButtonOnlyDown   false   function setLeftButtonState e      leftMouseButtonOnlyDown   e buttons     undefined        e which     1        e buttons     1     document body onmousedown   setLeftButtonState  document body onmousemove   setLeftButtonState  document body onmouseup   setLeftButtonState    If more complicated scenarios are required  different buttons multiple buttons control keys   check out the MouseEvent docs  When if Safari lifts its game  this should get easier

User · Answer

The following snippet will attempt to execute the  doStuff  function 2 seconds after the mouseDown event occurs in document body   If the user lifts up the button  the mouseUp event will occur and cancel the delayed execution   I d advise using some method for cross-browser event attachment - setting the mousedown and mouseup properties explicitly was done to simplify the example     function doStuff          does something when mouse is down in body for longer than 2 seconds    var mousedownTimeout   document body onmousedown   function        mousedownTimeout   window setTimeout doStuff  2000      document body onmouseup   function       window clearTimeout mousedownTimeout

User · Answer

the solution isn t good  one could  mousedown  on the document  then  mouseup  outside the browser  and on this case the browser would still be thinking the mouse is down   the only good solution is using IE event object

User · Answer

the solution isn t good  one could  mousedown  on the document  then  mouseup  outside the browser  and on this case the browser would still be thinking the mouse is down   the only good solution is using IE event object

User · Answer

Using jQuery  the following solution handles even the  drag off the page then release case      document  mousedown function e        mouseDown   true     mouseup function e        mouseDown   false     mouseleave function e        mouseDown   false        I don t know how it handles multiple mouse buttons  If there were a way to start the click outside the window  then bring the mouse into the window  then this would probably not work properly there either

User · Answer

You can combine  Pax and my answers to also get the duration that the mouse has been down for   var mousedownTimeout      mousedown   0   document body onmousedown   function       mousedown   0     window clearInterval mousedownTimeout     mousedownTimeout   window setInterval function     mousedown    200    200      document body onmouseup   function       mousedown   0    window clearInterval mousedownTimeout       Then later   if  mousedown  gt   2000         do something if the mousebutton has been down for at least 2 seconds

User · Answer

I think the best approach to this is to keep your own record of the mouse button state  as follows   var mouseDown   0  document body onmousedown   function          mouseDown   1    document body onmouseup   function         mouseDown   0      and then  later in your code   if  mouseDown    1           the mouse is down  do what you have to do

User · Answer

Well  you can t check if it s down after the event  but you can check if it s Up    If it s up   it means that no longer is down  P lol  So the user presses the button down  onMouseDown event      and after that  you check if is up  onMouseUp   While it s not up  you can do what you need

[javascript] JavaScript: Check if mouse button down?

Examples related to javascript

Examples related to input

Examples related to mouse

Examples related to user-input

Examples related to input-devices