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
HTML onmousedown Event Attribute
The HTML onmousedown event attribute is triggered when a mouse button is pressed down on an HTML element. This event fires immediately when the user presses any mouse button (left, right, or middle) while the cursor is over the element, before the button is released.
Syntax
Following is the syntax for the onmousedown event attribute −
<tagname onmousedown="script"></tagname>
Where script is the JavaScript code to execute when the mouse button is pressed down on the element.
Parameters
The onmousedown event attribute accepts the following parameter −
- script − JavaScript code or function call to execute when the mouse button is pressed down.
How It Works
The onmousedown event is part of the mouse event sequence. When a user clicks on an element, the events fire in this order −
-
onmousedown− Fires when the mouse button is pressed -
onmouseup− Fires when the mouse button is released -
onclick− Fires after both mousedown and mouseup complete
This makes onmousedown useful for creating interactive elements that respond immediately to user input, such as buttons that change appearance when pressed.
Example − Interactive Circle
Following example demonstrates the onmousedown event with an interactive circle that shrinks when pressed −
<!DOCTYPE html>
<html>
<head>
<title>HTML onmousedown Event Example</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.circle {
background: #e74c3c;
height: 150px;
width: 150px;
border-radius: 50%;
margin: 20px auto;
transition: transform 0.1s ease;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
h1 { color: white; margin-bottom: 10px; }
p { color: white; font-size: 16px; }
</style>
</head>
<body>
<h1>onmousedown Event Demo</h1>
<div class="circle" onmousedown="shrinkCircle()" onmouseup="expandCircle()"></div>
<p>Press and hold the red circle to see the effect</p>
<script>
function shrinkCircle() {
document.querySelector('.circle').style.transform = 'scale(0.8)';
}
function expandCircle() {
document.querySelector('.circle').style.transform = 'scale(1)';
}
</script>
</body>
</html>
The circle shrinks to 80% size when the mouse is pressed down and returns to normal size when released −
onmousedown Event Demo [Red Circle] - shrinks when pressed, expands when released Press and hold the red circle to see the effect
Example − Button Press Feedback
Following example shows how onmousedown provides immediate visual feedback for button interactions −
<!DOCTYPE html>
<html>
<head>
<title>Button Press Feedback</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
.btn {
background: #3498db;
color: white;
border: none;
padding: 15px 30px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
margin: 10px;
transition: all 0.1s ease;
}
.pressed {
background: #2980b9;
transform: translateY(2px);
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<h2>Button Press Effect</h2>
<button class="btn" onmousedown="pressEffect(this)" onmouseup="releaseEffect(this)">
Press Me!
</button>
<p id="message">Click the button to see immediate feedback</p>
<script>
function pressEffect(button) {
button.classList.add('pressed');
document.getElementById('message').textContent = 'Button is being pressed!';
}
function releaseEffect(button) {
button.classList.remove('pressed');
document.getElementById('message').textContent = 'Button was released!';
}
</script>
</body>
</html>
The button changes color and moves down when pressed, providing instant visual feedback −
Button Press Effect [Press Me! Button] - changes color and position when pressed Click the button to see immediate feedback
Example − Mouse Button Detection
Following example demonstrates detecting which mouse button was pressed using the event object −
<!DOCTYPE html>
<html>
<head>
<title>Mouse Button Detection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Mouse Button Detection</h2>
<div style="width: 300px; height: 200px; background: #f39c12; margin: 20px auto;
border-radius: 10px; display: flex; align-items: center; justify-content: center;
color: white; font-size: 18px; cursor: pointer;"
onmousedown="detectButton(event)">
Click me with different mouse buttons
</div>
<p id="result">Press left, right, or middle mouse button on the orange box</p>
<script>
function detectButton(event) {
let buttonName;
switch(event.button) {
case 0:
buttonName = 'Left';
break;
case 1:
buttonName = 'Middle';
break;
case 2:
buttonName = 'Right';
break;
default:
buttonName = 'Unknown';
}
document.getElementById('result').textContent = buttonName + ' mouse button was pressed!';
}
</script>
</body>
</html>
The example detects and displays which mouse button (left, right, or middle) was pressed −
Mouse Button Detection [Orange Box: Click me with different mouse buttons] Left mouse button was pressed! (or Right/Middle based on button clicked)
Common Use Cases
The onmousedown event is commonly used for −
- Interactive buttons − Providing immediate visual feedback when pressed
- Drag and drop operations − Starting drag operations when mouse is pressed
- Custom context menus − Detecting right-click actions
- Drawing applications − Beginning drawing strokes
- Games − Handling player input for shooting, selection, etc.
Browser Compatibility
The onmousedown event attribute is supported by all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It works consistently across desktop and mobile platforms, though mobile devices may have different touch behavior.
Conclusion
The onmousedown event attribute provides immediate response to mouse button presses, making it ideal for creating responsive user interfaces. It fires before onclick, allowing for instant visual feedback and more sophisticated mouse interactions. Use onmousedown when you need to respond immediately to user input rather than waiting for a complete click action.
237 Views
