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 released over an element in HTML?
When a mouse button is released over an HTML element, the onmouseup event is triggered. This event is commonly used for creating interactive elements that respond to mouse clicks and releases. The onmouseup attribute can be added to any HTML element to execute JavaScript code when the user releases a mouse button while the cursor is over that element.
Syntax
Following is the syntax for the onmouseup event attribute −
<element onmouseup="script">Content</element>
Where script is the JavaScript code that executes when the mouse button is released over the element.
How It Works
The onmouseup event is part of the mouse event sequence. When a user interacts with an element using the mouse, the events occur in this order −
onmousedown− Fires when the mouse button is pressed downonmouseup− Fires when the mouse button is releasedonclick− Fires after both mousedown and mouseup events complete
Example − Basic Mouse Up Event
Following example demonstrates the basic usage of the onmouseup event with color changes −
<!DOCTYPE html>
<html>
<head>
<title>Mouse Up Event Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3 id="myid" onmousedown="mouseDown()" onmouseup="mouseUp()" style="background-color: lightgray; padding: 15px; cursor: pointer;">
This is demo heading. Click and release!
</h3>
<p>Click above and then release to see the color change.</p>
<script>
function mouseDown() {
document.getElementById("myid").style.color = "red";
document.getElementById("myid").style.backgroundColor = "yellow";
}
function mouseUp() {
document.getElementById("myid").style.color = "blue";
document.getElementById("myid").style.backgroundColor = "lightgreen";
}
</script>
</body>
</html>
In this example, pressing the mouse button changes the text to red with yellow background, and releasing it changes to blue text with light green background −
Initial: This is demo heading. Click and release! (black text, gray background) On press: This is demo heading. Click and release! (red text, yellow background) On release: This is demo heading. Click and release! (blue text, light green background)
Example − Interactive Button with Mouse Events
Following example shows how to create an interactive button using mouse up and down events −
<!DOCTYPE html>
<html>
<head>
<title>Interactive Button Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<button id="interactiveBtn"
onmousedown="buttonPressed()"
onmouseup="buttonReleased()"
style="padding: 15px 25px; font-size: 16px; cursor: pointer; border: 2px solid #333; background-color: #f0f0f0;">
Click Me!
</button>
<p id="status">Button status: Ready</p>
<script>
function buttonPressed() {
var btn = document.getElementById("interactiveBtn");
btn.style.backgroundColor = "#333";
btn.style.color = "white";
btn.style.transform = "scale(0.95)";
document.getElementById("status").textContent = "Button status: Pressed";
}
function buttonReleased() {
var btn = document.getElementById("interactiveBtn");
btn.style.backgroundColor = "#4CAF50";
btn.style.color = "white";
btn.style.transform = "scale(1)";
document.getElementById("status").textContent = "Button status: Released";
}
</script>
</body>
</html>
The button changes appearance when pressed and released, providing visual feedback to the user −
Initial: Click Me! (gray button) Status: Button status: Ready On press: Click Me! (dark button, slightly smaller) Status: Button status: Pressed On release: Click Me! (green button, normal size) Status: Button status: Released
Example − Drawing Application
Following example demonstrates a practical use of onmouseup in a simple drawing application −
<!DOCTYPE html>
<html>
<head>
<title>Drawing with Mouse Events</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Simple Drawing Canvas</h3>
<div id="canvas"
onmousedown="startDrawing(event)"
onmouseup="stopDrawing()"
onmousemove="draw(event)"
style="width: 400px; height: 200px; border: 2px solid #333; background-color: white; cursor: crosshair;">
</div>
<p id="drawStatus">Drawing status: Ready</p>
<button onclick="clearCanvas()">Clear</button>
<script>
let isDrawing = false;
function startDrawing(e) {
isDrawing = true;
document.getElementById("drawStatus").textContent = "Drawing status: Drawing...";
}
function stopDrawing() {
isDrawing = false;
document.getElementById("drawStatus").textContent = "Drawing status: Stopped";
}
function draw(e) {
if (!isDrawing) return;
var canvas = document.getElementById("canvas");
var rect = canvas.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
var dot = document.createElement("div");
dot.style.position = "absolute";
dot.style.left = rect.left + x + "px";
dot.style.top = rect.top + y + "px";
dot.style.width = "3px";
dot.style.height = "3px";
dot.style.backgroundColor = "blue";
dot.style.borderRadius = "50%";
dot.style.pointerEvents = "none";
document.body.appendChild(dot);
}
function clearCanvas() {
var dots = document.querySelectorAll("div[style*='border-radius: 50%']");
dots.forEach(dot => dot.remove());
document.getElementById("drawStatus").textContent = "Drawing status: Cleared";
}
</script>
</body>
</html>
In this drawing application, onmouseup stops the drawing process when the user releases the mouse button.
Browser Compatibility
The onmouseup event is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It works consistently across desktop and mobile devices, though mobile devices may behave differently with touch events.
Key Points
The
onmouseupevent fires when any mouse button is released over the elementIt works with left, right, and middle mouse buttons
The event bubbles up through the DOM hierarchy
It can be prevented using
event.preventDefault()Best used in combination with
onmousedownfor interactive elements
Conclusion
The onmouseup event is essential for creating interactive web elements that respond to mouse interactions. It works best when combined with onmousedown to create complete click interactions, providing users with immediate visual feedback and enabling dynamic user interfaces.
279 Views
