How to detect control click in Javascript from an onclick div attribute

Question

I need to know if the user is clicking or CONTROL CLICKING a div element    i have seen examples on how to do it using event listeners   but my codes are already set in place  and is using an on-element onclick method     HTML    lt div id  1  onclick  selectMe    gt blah lt  div gt    JS   function selectMe               determine if this is a single click  or a cntrol click             also would love to know if it was a left or right mouse button click

User · Answer

Because it s been a several years since this question was first asked  the other answers are outdated or incomplete   Here s the code for a modern implementation using jQuery       div 1    on   click   function  event         if   event ctrlKey               is ctrl   click       else             normal click              As for detecting right-clicks  this was correctly provided by another user but I ll list it here just to have everything in one place       div 1    on   contextmenu   function  event            right-click handler

User · Answer

From above only   just edited so it works right away   lt script gt      var control   false        document  on  keyup keydown   function  e            control   e ctrlKey                 function                  1x   on  click   function                  if  control                       control-click                 alert  Control Click                  else                      single-click                 alert  Single Click                                         lt  script gt   lt p id  1x  gt Click me lt  p gt

User · Answer

Try this code       1   on  mousedown  function e       if  e button  0  amp  amp  e ctrlKey           alert  is Left Click         else if  e button  2  amp  amp  e ctrlKey          alert  is Right Click               Sorry I added e ctrlKey

User · Answer

I d recommend using JQuery s keyup and keydown methods on the document  as it normalizes the event codes  to make one solution crossbrowser   For the right click  you can use oncontextmenu  however beware it can be buggy in IE8  See a chart of compatibility here   http   www quirksmode org dom events contextmenu html   lt p onclick  selectMe 1   oncontextmenu  selectMe 2   gt Click me lt  p gt     document  keydown function event       if event which   17           cntrlIsPressed   true         document  keyup function        cntrlIsPressed   false       var cntrlIsPressed   false    function selectMe mouseButton        if cntrlIsPressed                switch mouseButton                        case 1                  alert  Cntrl    left click                    break              case 2                  alert  Cntrl   right click                    break              default                  break

User · Answer

In your handler  check the window event object for the property ctrlKey as such   function selectMe        if  window event ctrlKey              ctrl was held down during the click           UPDATE  the above solution depends on a proprietary property on the window object  which perhaps should not be counted on to exist in all browsers  Luckily  we now have a working draft that takes care of our needs  and according to MDN  it is widely supported  Example   HTML   lt span onclick  handler event   gt Click me lt  span gt    JS  function handler ev      console log  CTRL pressed during click    ev ctrlKey       The same applies for keyboard events  See also KeyboardEvent getModifierState

User · Answer

When there is a mouse click ctrlKey is event attribute which can be accessed as e ctrlKey  Look down for example     xyz   click function e      if e ctrlKey         if ctrl key is pressed       else         if ctrl key is not pressed         note  https   www w3schools com jsref event key keycode asp

User · Answer

pure javascript   var ctrlKeyCode   17  var cntrlIsPressed   false   document addEventListener  keydown   function event       if event which   17           cntrlIsPressed   true       document addEventListener  keyup   function        if event which   17           cntrlIsPressed   true         function selectMe mouseButton        if cntrlIsPressed                switch mouseButton                        case 1                  alert  Cntrl    left click                    break              case 2                  alert  Cntrl   right click                    break              default                  break

User · Answer

Try this   var control   false    document  on  keyup keydown   function e      control   e ctrlKey          div 1   on  click   function       if  control           control-click     else          single-click           And the right-click triggers a contextmenu event  so      div 1   on  contextmenu   function          right-click handler

User · Answer

You cannot detect if a key is down after it s been pressed  You can only monitor key events in js  In your case I d suggest changing onclick with a key press event and then detecting if it s the control key by event keycode  and then you can add your click event

[javascript] How to detect control+click in Javascript from an onclick div attribute?

Examples related to javascript

Examples related to jquery