Javascript – Detect CTRL and SHIFT key without keydown event

ctrljavascriptkeydownshift

I've been wondering if I can detect CTRL and SHIFT key being pressed WITHOUT using keydown event.

The reason is that I am creating some sort of Grid Viewer in JavaScript, and I implemented selecting different items by holding CTRL or SHIFT key as it functions in most common viewers, editors and so on.

The problem is that when the focus is not anywhere on the page. For example I'm adding page to the bookmarks. Then I hold CTRL or SHIFT and click on the item, but it acts normally as keydown hasn't been triggered.

Any way of omitting this? Perhaps not, but it can be confusing for customers who will treat it as my own obvious Bug.

Best Answer

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.

Related Solutions

Javascript – jQuery Event Keypress: Which key was pressed

Actually this is better:

 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do something
 }

Javascript – event bubbling and capturing

Event bubbling and capturing are two ways of event propagation in the HTML DOM API, when an event occurs in an element inside another element, and both elements have registered a handle for that event. The event propagation mode determines in which order the elements receive the event.

With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements.

With capturing, the event is first captured by the outermost element and propagated to the inner elements.

Capturing is also called "trickling", which helps remember the propagation order:

trickle down, bubble up

Back in the old days, Netscape advocated event capturing, while Microsoft promoted event bubbling. Both are part of the W3C Document Object Model Events standard (2000).

IE < 9 uses only event bubbling, whereas IE9+ and all major browsers support both. On the other hand, the performance of event bubbling may be slightly lower for complex DOMs.

We can use the addEventListener(type, listener, useCapture) to register event handlers for in either bubbling (default) or capturing mode. To use the capturing model pass the third argument as true.

Example

<div>
    <ul>
        <li></li>
    </ul>
</div>

In the structure above, assume that a click event occurred in the li element.

In capturing model, the event will be handled by the div first (click event handlers in the div will fire first), then in the ul, then at the last in the target element, li.

In the bubbling model, the opposite will happen: the event will be first handled by the li, then by the ul, and at last by the div element.

For more information, see

Event Order on QuirksMode
addEventListener on MDN
Events Advanced on QuirksMode

In the example below, if you click on any of the highlighted elements, you can see that the capturing phase of the event propagation flow occurs first, followed by the bubbling phase.

var logElement = document.getElementById('log');

function log(msg) {
    logElement.innerHTML += ('<p>' + msg + '</p>');
}

function capture() {
    log('capture: ' + this.firstChild.nodeValue.trim());
}

function bubble() {
    log('bubble: ' + this.firstChild.nodeValue.trim());
}

function clearOutput() {
    logElement.innerHTML = "";
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener('click', capture, true);
    divs[i].addEventListener('click', bubble, false);
}
var clearButton = document.getElementById('clear');
clearButton.addEventListener('click', clearOutput);

p {
    line-height: 0;
}

div {
    display:inline-block;
    padding: 5px;

    background: #fff;
    border: 1px solid #aaa;
    cursor: pointer;
}

div:hover {
    border: 1px solid #faa;
    background: #fdd;
}

<div>1
    <div>2
        <div>3
            <div>4
                <div>5</div>
            </div>
        </div>
    </div>
</div>
<button id="clear">clear output</button>
<section id="log"></section>

Another example at JSFiddle.

Best Answer

Related Solutions

Javascript – jQuery Event Keypress: Which key was pressed

Javascript – event bubbling and capturing

Example

Related Topic