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
Execute a script when a mouse button is pressed down on an element in HTML?
The onmousedown attribute in HTML executes a script when a mouse button is pressed down on an element. This event fires before the onmouseup event and is useful for creating interactive elements that respond to mouse press actions.
Syntax
Following is the syntax for the onmousedown attribute −
<element onmousedown="script">Content</element>
The script parameter contains JavaScript code or function calls to execute when the mouse button is pressed down.
Basic Example
Following example demonstrates the onmousedown attribute with color changes −
<!DOCTYPE html>
<html>
<head>
<title>onmousedown Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3 id="myid" onmousedown="mouseDown()" onmouseup="mouseUp()" style="cursor: pointer;">
This is demo heading.
</h3>
<p>Click above and then release.</p>
<script>
function mouseDown() {
document.getElementById("myid").style.color = "red";
}
function mouseUp() {
document.getElementById("myid").style.color = "blue";
}
</script>
</body>
</html>
The output shows a heading that changes color when pressed down and released −
This is demo heading. (changes to red on press, blue on release) Click above and then release.
Text Selection Example
Following example shows how to display different messages during mouse down and up events −
<!DOCTYPE html>
<html>
<head>
<title>Mouse Down Text Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div onmousedown="showDown()" onmouseup="showUp()" style="background-color: lightblue; padding: 20px; cursor: pointer; border: 2px solid #007acc;">
Click and hold this box
</div>
<p id="status">Ready</p>
<script>
function showDown() {
document.getElementById("status").innerHTML = "Mouse button is pressed down!";
}
function showUp() {
document.getElementById("status").innerHTML = "Mouse button released.";
}
</script>
</body>
</html>
The output displays a status message that changes based on mouse press state −
[Light blue box with text: Click and hold this box] Ready (changes to "Mouse button is pressed down!" on press, "Mouse button released." on release)
Button Click Counter
Following example demonstrates counting mouse down events −
<!DOCTYPE html>
<html>
<head>
<title>Mouse Down Counter</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<button onmousedown="countClicks()" style="padding: 10px 20px; font-size: 16px; cursor: pointer;">
Press Me!
</button>
<p>Mouse down count: <span id="counter">0</span></p>
<script>
var count = 0;
function countClicks() {
count++;
document.getElementById("counter").innerHTML = count;
}
</script>
</body>
</html>
Each time the button is pressed down, the counter increments −
[Press Me!] Button Mouse down count: 0 (increments each time button is pressed)
Mouse Event Sequence
The mouse events fire in the following order when clicking an element −
Key Points
-
Event timing −
onmousedownfires immediately when any mouse button is pressed, beforeonmouseupandonclick. -
All mouse buttons − The event triggers for left, right, and middle mouse button presses.
-
Element focus − The event only fires when the mouse is pressed while the cursor is over the target element.
-
Compatibility − Supported in all modern browsers and HTML versions.
Conclusion
The onmousedown attribute provides immediate response to mouse button presses, making it ideal for interactive UI elements. It works with all mouse buttons and fires before onmouseup and onclick events in the mouse event sequence.
411 Views
