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 onmouseup Event Attribute
The HTML onmouseup event attribute is triggered when a mouse button is released from an HTML element. This event occurs after the mouse button has been pressed down and then released, making it useful for implementing interactive click behaviors and drag-and-drop functionality.
Syntax
Following is the syntax for the onmouseup event attribute −
<tagname onmouseup="script">Content</tagname>
Where script is the JavaScript code to execute when the mouse button is released over the element.
How onmouseup Works
The onmouseup event is part of the mouse event sequence. When you interact with an element using a mouse, the events occur in this order −
-
onmousedown− Fired when the mouse button is pressed down -
onmouseup− Fired when the mouse button is released -
onclick− Fired after both mousedown and mouseup events complete
Basic Example
Following example demonstrates the onmouseup event with visual feedback −
<!DOCTYPE html>
<html>
<head>
<title>onmouseup Event Example</title>
<style>
.circle {
background: #e74c3c;
height: 120px;
width: 120px;
border-radius: 50%;
margin: 20px auto;
cursor: pointer;
transition: transform 0.2s ease;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>onmouseup Event Demo</h2>
<div class="circle" onmousedown="shrink()" onmouseup="expand()"></div>
<p>Click and hold the red circle, then release</p>
<script>
function shrink() {
document.querySelector('.circle').style.transform = 'scale(0.7)';
}
function expand() {
document.querySelector('.circle').style.transform = 'scale(1.1)';
}
</script>
</body>
</html>
The circle shrinks when the mouse is pressed down and expands when released −
[Red circle that shrinks on mousedown and expands on mouseup] Click and hold the red circle, then release
Text Selection Example
Following example shows how onmouseup can be used to detect text selection −
<!DOCTYPE html>
<html>
<head>
<title>Text Selection with onmouseup</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Text Selection Detection</h2>
<p onmouseup="showSelection()">
Select any part of this text with your mouse. The onmouseup event will
detect when you finish selecting and display the selected text below.
</p>
<p id="output" style="color: blue; font-weight: bold;"></p>
<script>
function showSelection() {
var selectedText = window.getSelection().toString();
var output = document.getElementById('output');
if (selectedText) {
output.textContent = 'Selected: "' + selectedText + '"';
} else {
output.textContent = 'No text selected';
}
}
</script>
</body>
</html>
When you select text and release the mouse, the selected text appears below −
Text Selection Detection Select any part of this text with your mouse. The onmouseup event will detect when you finish selecting and display the selected text below. Selected: "part of this text" (in blue, bold)
Button State Example
Following example demonstrates using onmouseup with onmousedown to create interactive button states −
<!DOCTYPE html>
<html>
<head>
<title>Interactive Button States</title>
<style>
.btn {
background: #3498db;
color: white;
padding: 15px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin: 10px;
transition: all 0.1s ease;
}
.btn:hover { background: #2980b9; }
</style>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Interactive Button Demo</h2>
<button class="btn" onmousedown="pressDown(this)" onmouseup="pressUp(this)">
Click Me
</button>
<p id="status">Button ready</p>
<script>
function pressDown(btn) {
btn.style.transform = 'scale(0.95)';
btn.style.boxShadow = 'inset 2px 2px 5px rgba(0,0,0,0.3)';
document.getElementById('status').textContent = 'Button pressed down';
}
function pressUp(btn) {
btn.style.transform = 'scale(1)';
btn.style.boxShadow = 'none';
document.getElementById('status').textContent = 'Button released';
}
</script>
</body>
</html>
The button shows visual feedback when pressed and released −
Interactive Button Demo [Click Me] (blue button with hover effects) Button ready (status changes to "pressed down" and "released")
Event Object Properties
The onmouseup event provides an event object with useful properties −
<!DOCTYPE html>
<html>
<head>
<title>Mouse Event Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Mouse Event Information</h2>
<div style="background: #f0f0f0; padding: 40px; border: 2px solid #ccc;"
onmouseup="showEventInfo(event)">
Click anywhere in this gray area
</div>
<div id="info" style="margin-top: 20px; font-family: monospace;"></div>
<script>
function showEventInfo(e) {
var info = document.getElementById('info');
info.innerHTML =
'Mouse button: ' + e.button + '<br>' +
'X coordinate: ' + e.clientX + '<br>' +
'Y coordinate: ' + e.clientY + '<br>' +
'Ctrl key: ' + e.ctrlKey + '<br>' +
'Shift key: ' + e.shiftKey;
}
</script>
</body>
</html>
The output shows detailed information about the mouse event −
Mouse Event Information [Gray clickable area] Mouse button: 0 X coordinate: 245 Y coordinate: 156 Ctrl key: false Shift key: false
Common Use Cases
The onmouseup event is commonly used for −
- Drag and drop operations − Detecting when an item is dropped
- Drawing applications − Ending a drawing stroke
- Interactive UI elements − Button press feedback
- Text selection handling − Processing selected content
- Custom context menus − Right-click menu implementation
| Event | When It Fires | Common Use |
|---|---|---|
| onmousedown | Mouse button pressed | Start drag, visual feedback |
| onmouseup | Mouse button released | End drag, complete action |
| onclick | After mousedown + mouseup | Standard click handling |
Conclusion
The onmouseup event attribute is essential for creating interactive web elements that respond to mouse button releases. It works perfectly with onmousedown to provide complete mouse interaction feedback and is commonly used in drag-and-drop interfaces, drawing applications, and custom button implementations.
179 Views
