JavaScript mouseup

The mouseup event in JavaScript is fired when a mouse button is released after clicking on a web page element. This event can be used to trigger a task or function when a user finishes clicking on an element.

Syntax

element.addEventListener("mouseup", function(){
  // code to execute when mouse button is released on the element
});

Example

<button id="btn">Click Me</button>

<script>
  const btn = document.querySelector('#btn');
  btn.addEventListener('mouseup', function() {
    console.log('Button was released!');
  });
</script>

Output

When the mouse button is released after clicking on the button, the following output will be displayed in the console:

Button was released!

Explanation

In the above example, we first selected the button element using the querySelector method and assigned it to a variable btn. We then added an event listener for the mouseup event on the btn element using addEventListener method.

The function inside the event listener logs a message to the console when the button is released.

Use

The mouseup event can be used to:

• Perform some action after the user clicks and releases a mouse button
• Determine the release of a mouse button for drag and drop operations
• Initiate a function or action based on the state of a mouse button after clicking an element

Important Points

• The mouseup event is fired after the mousedown event and the click event.
• The mouseup event is not supported on some touch devices.
• The which property can be used to determine which mouse button was released (left, right or middle).

Summary

In JavaScript, the mouseup event is used to detect when a mouse button is released after clicking on an element. The event is added using the addEventListener method and can be used to trigger a function or task when the mouse button is released.