EN
JavaScript - onmouseup event example
0
points
In this article, we would like to show you onmouseup event example in JavaScript.
Quick solution:
var myElement = document.querySelector('#my-element');
myElement.addEventListener('mouseup', function() {
console.log('onmouseup event occurred.');
});
or:
<div onmouseup="handleMouseup()"> div body here... </div>
or:
var myElement = document.querySelector('#my-element');
myElement.onmouseup = function() {
console.log('onmouseup event occurred.');
};
Note:
The
onmouseupis usually used withonmousedownevent. Check examples below to see how they work.
Practical examples
There are three common ways how to use onmouseup event:
- with event listener,
- with element attribute,
- with element property.
1. Event listener based example
In this section, we want to show how to use onmouseup event on div element via event listener mechanism.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
padding: 0 0 0 10px;
height: 260px;
}
#square {
padding: 10px;
height: 120px;
width: 120px;
border-radius: 10px;
background: #b5edc2;
transition: 1.2s;
}
</style>
</head>
<body>
<p>Press and hold the square:</p>
<div id="square"/>
<script>
var mySquare = document.querySelector('#square'); // find element by id
mySquare.addEventListener("mousedown", handleMouseDown); // add mousedown event
function handleMouseDown(){
mySquare.style.height = "200px";
mySquare.style.width = "200px";
mySquare.style.background = "#28a745";
}
mySquare.addEventListener("mouseup", handleMouseUp); // add mouseup event
function handleMouseUp(){
mySquare.style.height = "120px";
mySquare.style.width = "120px";
mySquare.style.background = "#b5edc2";
}
</script>
</body>
</html>
2. Attribute based example
In this section, we want to show how to use onmouseup event on div element via attribute.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
padding: 0 0 0 10px;
height: 260px;
}
#square {
padding: 10px;
height: 120px;
width: 120px;
border-radius: 10px;
background: #b5edc2;
transition: 1.2s;
}
</style>
</head>
<body>
<p>Press and hold the square:</p>
<div id="square" onmousedown="handleMouseDown()" onmouseup="handleMouseUp()"/>
<script>
var mySquare = document.querySelector('#square');
function handleMouseDown(){
mySquare.style.height = "200px";
mySquare.style.width = "200px";
mySquare.style.background = "#28a745";
}
function handleMouseUp(){
mySquare.style.height = "120px";
mySquare.style.width = "120px";
mySquare.style.background = "#b5edc2";
}
</script>
</body>
</html>
3. Property based example
In this section, we want to show how to use onmouseup event on input element via property.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
padding: 0 0 0 10px;
height: 260px;
}
#square {
padding: 10px;
height: 120px;
width: 120px;
border-radius: 10px;
background: #b5edc2;
transition: 1.2s;
}
</style>
</head>
<body>
<p>Press and hold the square:</p>
<div id="square"/>
<script>
var mySquare = document.querySelector('#square');
mySquare.onmousedown = function(){
mySquare.style.height = "200px";
mySquare.style.width = "200px";
mySquare.style.background = "#28a745";
}
mySquare.onmouseup = function(){
mySquare.style.height = "120px";
mySquare.style.width = "120px";
mySquare.style.background = "#b5edc2";
}
</script>
</body>
</html>