Check Ctrl/Shift/Alt Keys on 'Click' Event

Check Ctrl / Shift / Alt keys on 'click' event

Well you this wont work in all browsers just IE 8. Microsoft implemented the ability to determine which (right/left) key was pressed. Here is a link http://msdn.microsoft.com/en-us/library/ms534630(VS.85).aspx

I also found this wonder article about keypress, keyup, keydown event in browsers.
http://unixpapa.com/js/key.html

$('#someelement').bind('click', function(event){ 

    if(event.ctrlKey) {
      if (event.ctrlLeft) {
        console.log('ctrl-left'); 
      }
      else {
        console.log('ctrl-right');
      }
    }
    if(event.altKey) {
      if (event.altLeft) {
        console.log('alt-left'); 
      }
      else {
        console.log('alt-right');
      }
    }
    if(event.shiftKey) {
      if (event.shiftLeft) {
        console.log('shift-left'); 
      }
      else
      {
        console.log('shift-right');
      }
    }
  }); 

Detecting combination keypresses (Control, Alt, Shift)?

Refer to the W3C spec for keyboard events. Several boolean attributes are provided to determine if modifier keys were pressed in conjunction with whatever target key you are interested in. They are:

• ctrlKey     -- The "Control" key was also pressed.
• shiftKey   -- The "Shift" key was also pressed.
• altKey       -- The "Alt" key was also pressed.
• metaKey     -- The "Meta" key was also pressed.

Other important notes:

1. The which property is deprecated.
2. Use keydown because Chrome does not fire the keypress event for known keyboard shortcuts.
3. Some spec'd properties, such as key, are only partly functional in Firefox.
4. You do not need to wrap your code in an anonymous function like that for Tampermonkey (or Greasemonkey or most userscript engines). Scope protection is automatically provided.

So, your code would become:

document.addEventListener ("keydown", function (zEvent) {
    if (zEvent.ctrlKey  &&  zEvent.altKey  &&  zEvent.key === "e") {  // case sensitive
        // DO YOUR STUFF HERE
    }
} );

---

Run this handy demo ^{_{(updated now that key has full support)}}:

var targArea = document.getElementById ("keyPrssInp");targArea.addEventListener ('keydown',  reportKeyEvent);
function reportKeyEvent (zEvent) {    var keyStr = ["Control", "Shift", "Alt", "Meta"].includes(zEvent.key) ? "" : zEvent.key + " ";    var reportStr   =        "The " +        ( zEvent.ctrlKey  ? "Control " : "" ) +        ( zEvent.shiftKey ? "Shift "   : "" ) +        ( zEvent.altKey   ? "Alt "     : "" ) +        ( zEvent.metaKey  ? "Meta "    : "" ) +        keyStr + "key was pressed."    ;    $("#statusReport").text (reportStr);
    //--- Was a Ctrl-Alt-E combo pressed?    if (zEvent.ctrlKey  &&  zEvent.altKey  &&  zEvent.key === "e") {  // case sensitive        this.hitCnt = ( this.hitCnt || 0 ) + 1;        $("#statusReport").after (            '<p>Bingo! cnt: ' + this.hitCnt + '</p>'        );    }    zEvent.stopPropagation ();    zEvent.preventDefault ()}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><p><label>Press keys in here:<input type="text" value="" id="keyPrssInp"></label></p><p id="statusReport"></p>

How to detect Click + [Shift, Ctrl, Alt] in reactjs click event?

Your click handling function would have a format as such:

clickHandler: function (event, value) {

   event.stopPropagation();

   // In that case, event.ctrlKey does the trick.
   if (event.ctrlKey) {
        console.debug("Ctrl+click has just happened!");
   }
}

Detect CTRL and SHIFT key without keydown event?

You don't need any key events at all to detect Shift, Ctrl and Alt when mouse is clicked^MDN.

The Event object contains this information:

element.addEventListener('click', function (e) {
    console.log(e.shiftKey);
    console.log(e.ctrlKey);
    console.log(e.altKey);
});

A demo at jsFiddle.

These properties can be read also in keyboard event handlers.

GTK: How to determine ctl/alt key state when the mouse is clicked?

Instead of trying to keep a state around permanently, check for modifiers every time you handle an event.

Examples:

https://developer.gnome.org/gtk3/stable/checklist-modifiers.html

Detect ctrl+click on button in pygtk

Getting shift/ctrl/alt states from a mouse event?

Assuming that you're still in the mouse event handler, you can check the value of Keyboard.Modifiers. I don't think that there is anyway to get modifier information from the event itself, so you have to interrogate the keyboard directly.

---

Related Topics