 |
Eventos onmousedown,onmouseup.
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
<!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>