JavaScript mousedown and mouseup Events

mousedown fires when a mouse button is pressed over an element. mouseup fires when the button is released. The live box below preserves the original plus2net press-and-release example.

const box = document.getElementById('pressBox');
box.addEventListener('mousedown', () => {
  box.style.background = '#f0f000';
});
box.addEventListener('mouseup', () => {
  box.style.background = '#90f0c0';
});

Complete HTML and JavaScript Source

<div id="pressBox">
  Bring the mouse inside this box.
  <br>Press and hold the mouse button, then release it.
</div>
<script>
const pressBox = document.getElementById('pressBox');
pressBox.addEventListener('mousedown', () => {
  pressBox.style.background = '#f0f000';
});
pressBox.addEventListener('mouseup', () => {
  pressBox.style.background = '#90f0c0';
});
</script>

How mousedown and mouseup Work Top ↑

The starting background is gray. While the mouse button is held down over the box, the mousedown handler changes it to yellow. Releasing the button fires mouseup and changes the box to green. This keeps the original demo behavior but moves the JavaScript out of inline HTML attributes.

Typical Event Order Top ↑

A normal mouse click generally involves mousedown, then mouseup, followed by click. Use mousedown when the action must begin as soon as the button is pressed; use click when a completed activation is what matters.

Mouse Events and Pointer Events Top ↑

Mouse events remain useful when the lesson is specifically about mouse behavior. For interfaces that should handle mouse, pen and touch through one event model, also learn the corresponding pointer events such as pointerdown and pointerup.

← Event Handling onMouseOver and onMouseOut →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: