Eventos onmousedown,onmouseup

El evento onmousedown se dispara cuando presionamos alguno de los botones del mouse y el evento onmouseup cuando dejamos de presionar el botón.

Evento onmousedown

El evento onmousedown ocurre cuando un usuario presiona un botón del mouse sobre un elemento.

Sintaxis

target.onmousedown = functionRef;

Parámetros

  • functionRefes un nombre de función o una expresión de función . La función recibe un MouseEventobjeto como único argumento.

Ejemplo

Este ejemplo revela parte de una imagen cuando presiona y mantiene presionado un botón del mouse. Utiliza los onmousedown, onmouseup y onmousemovelos controladores de eventos.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">      
        <style type="text/css">
            .container {
  width: 400px;
  height: 295px;
  background: black;
}
.view {
  position: absolute;
  width: 200px;
  height: 100px;
  background: white;
  border-radius: 50%;
}
img {
  mix-blend-mode: darken;
}
        </style>
      
        <title>Ejemplo</title>
    </head>
    <body>
 <div class="container">
  <div class="view" hidden></div>
  <img src="imagenes/foto1.jpg">
</div>
<script>
                function showView(event) {
  view.removeAttribute('hidden');
  view.style.left = event.clientX - 50 + 'px';
  view.style.top = event.clientY - 50 + 'px';
  event.preventDefault();
}
function moveView(event) {
  view.style.left = event.clientX - 50 + 'px';
  view.style.top = event.clientY - 50 + 'px';
}
function hideView(event) {
  view.setAttribute('hidden', '');
}
const container = document.querySelector('.container');
const view = document.querySelector('.view');
container.onmousedown = showView;
container.onmousemove = moveView;
document.onmouseup = hideView;
            </script>
    </body>
</html>

Evento onmouseup

El evento onmouseup se activa cuando el usuario suelta el botón del mouse.
Nota: Lo contrario de onmouseup , onmousedown.

Sintaxis

target.onmouseup = functionRef;

Propiedades

  • functionRefes un nombre de función o una expresión de función . La función recibe un MouseEventobjeto como único argumento.

Ejemplo

Ejecute un JavaScript al soltar el botón del mouse sobre un párrafo:
<!DOCTYPE html>
<html>
<body>
<p id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()">
¡Haz clic en el texto! La función mouseDown () se activa cuando se presiona el botón del mouse sobre este párrafo y establece el color del texto en rojo. 
La función mouseUp () se activa cuando se suelta el botón del mouse y establece el color del texto en azul..
</p>

<script>
function mouseDown() {
  document.getElementById("myP").style.color = "red";
}

function mouseUp() {
  document.getElementById("myP").style.color = "blue";
}
</script>
</body>
</html>