Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
What is the role of ctrlKey Mouse Event in JavaScript?
The ctrlKey mouse event property is a boolean value that indicates whether the CTRL key was pressed when a mouse event occurred. This property is available on all mouse events like click, mousedown, mouseup, etc.
Syntax
event.ctrlKey
Return Value
-
true- if the CTRL key was pressed during the mouse event -
false- if the CTRL key was not pressed during the mouse event
Example
The following example demonstrates how to detect if the CTRL key is pressed when clicking on an element:
<!DOCTYPE html>
<html>
<body>
<div id="clickArea" style="padding: 20px; background-color: #f0f0f0; border: 2px solid #ccc; margin: 20px;">
Press and hold CTRL key and then click here.
</div>
<script>
document.getElementById('clickArea').addEventListener('mousedown', function(event) {
if (event.ctrlKey) {
alert("CTRL key: Pressed");
} else {
alert("CTRL key: NOT Pressed");
}
});
</script>
</body>
</html>
Practical Use Cases
The ctrlKey property is commonly used for:
- Multi-selection: Allow users to select multiple items by holding CTRL while clicking
- Context menus: Show different options based on modifier keys
- Keyboard shortcuts: Implement CTRL+click functionality
Example: Multi-selection List
<!DOCTYPE html>
<html>
<body>
<p>Hold CTRL and click items to select multiple:</p>
<ul id="itemList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<script>
document.getElementById('itemList').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
if (!event.ctrlKey) {
// Clear previous selections if CTRL not pressed
const items = document.querySelectorAll('#itemList li');
items.forEach(item => item.style.backgroundColor = '');
}
// Toggle selection of clicked item
if (event.target.style.backgroundColor === 'lightblue') {
event.target.style.backgroundColor = '';
} else {
event.target.style.backgroundColor = 'lightblue';
}
}
});
</script>
</body>
</html>
Browser Compatibility
The ctrlKey property is supported by all modern browsers and has been part of the DOM specification for many years.
Conclusion
The ctrlKey property provides a simple way to detect CTRL key presses during mouse events. It's essential for implementing advanced user interactions like multi-selection and custom keyboard shortcuts.
Updated on: 2026-03-15T23:18:59+05:30
299 Views
Advertisements