MouseEvent.shiftKey is a read-only boolean: true if the Shift key was pressed when the mouse event happened, otherwise false (MDN).
Read the notes below before you rely on this property. Prefer feature detection when support is limited.
Use event.shiftKey. Start with this line.
event.shiftKey| Call | What it does |
|---|---|
event.shiftKey | Primary signature. |
Built into the browser. Read event.shiftKey on a MouseEvent — no import required.
event.shiftKeyThis member has no parameters beyond those shown in the signature.
| Return Value | Description |
|---|---|
| * | true if Shift was held, else false |
click (MDN)Show whether the Shift key is pressed on each click.
const log = document.querySelector("#log");
document.addEventListener("click", function (e) {
log.textContent = "The shift key is pressed: " + e.shiftKey;
});click. MDN’s basic demo event.e.shiftKey. Boolean for Shift at that moment.true.Use Shift+click for “extend selection” style behavior.
button.addEventListener("click", function (e) {
if (e.shiftKey) {
console.log("Shift+click — extend selection");
} else {
console.log("Normal click — select one item");
}
});shiftKey. Two clear code paths.MouseEventSet shiftKey when creating an event in code.
const event = new MouseEvent("click", {
shiftKey: true,
bubbles: true
});
console.log(event.shiftKey); // true
console.log(event.type); // "click"
console.log(event instanceof MouseEvent); // trueshiftKey: true. Constructor option sets the flag.false. Omit it when Shift is not needed.Log shiftKey next to Ctrl, Alt, and Meta on each click.
document.addEventListener("click", function (e) {
console.log({
shiftKey: e.shiftKey,
ctrlKey: e.ctrlKey,
altKey: e.altKey,
metaKey: e.metaKey
});
});true.getModifierState("Shift")Compare the boolean property with the modifier-state API.
const event = new MouseEvent("click", { shiftKey: true });
console.log(event.shiftKey); // true
console.log(event.getModifierState("Shift")); // true
console.log(event.shiftKey === event.getModifierState("Shift")); // trueshiftKey is the shortcut. Direct boolean on the event.getModifierState("Shift"). Same idea via a string name.shiftKey for clarity when you only care about Shift.MouseEvent.shiftKey is Baseline Widely available (MDN, since July 2015). Safe for Shift+mouse UIs everywhere.
Supported across Chrome, Firefox, Safari, Edge, Opera, and legacy IE. Read-only boolean for the Shift key.
Bottom line: Use freely for Shift+click and range-select patterns. Pair with other modifier flags when needed.
Learn how event.webkitForce reports Force Touch pressure in WebKit.
10 people found this page helpful