¿Has escuchado hablar de los eventos del ratón en jQuery? Seguramente te sonará como algo técnico y complicado, pero en realidad son herramientas muy útiles que te permiten mejorar la interacción de tus usuarios con tu sitio web. En este artículo de TIEngranaje te contaremos todo lo que necesitas saber sobre los eventos del ratón en jQuery y cómo puedes utilizarlos para desarrollar una experiencia de usuario única y atractiva. ¡No te lo pierdas!
jQuery admite una variedad de eventos relacionados con el mouse. En este artículo, vamos a echar un vistazo más de cerca a otros eventos como hover, mousedown, mouseup, mouseenter, mouseleave, mousemove, mouseovery mouseout.
Sintaxis
$(selector).hover(inFunction,outFunction)
$(selector).mousedown(function)
$(selector).mouseup(function)
$(selector).mouseenter(function)
$(selector).mouseleave(function)
$(selector).mouseover(function)
$(selector).mouseout(function)
$(selector).mousemove(function)| Parámetro | Descripción |
|---|---|
inFunction |
Especifica la función para mouseenter evento |
outFunction |
Especifica la función opcional para mouseleave evento |
function |
Especifica la función opcional para ejecutar |
Ejemplo HTML
Usaremos el siguiente código HTML para los ejemplos que se enumeran a continuación.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.itgeared.com/jquery-mouse-hover-mouseover-events/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// ... jQuery Code ...
});
</script>
</head>
<body>
<img id="imgMouse" src="mouse.jpg" />
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>Flotar
El hover El evento vinculará dos controladores a los elementos coincidentes, que se ejecutarán cuando el puntero del mouse ingrese (mouseenter) y hojas (mouseleave) los elementos. El sintaxis para el evento hover es $(selector).hover(inFunction,outFunction). Aquí hay un ejemplo.
<script type="text/javascript">
$("#imgMouse").hover(function(){
$("div").css("background-color", "Yellow")
}, function(){
$("div").css("background-color", "LightGrey")
});
</script> Ratón abajo y Ratón arriba
El mousedown El evento se activará tan pronto como se presione el botón del mouse. A diferencia del click evento, no espera a que se presione el botón. Este evento se puede utilizar en lugar del click evento cuando desea que el evento se dispare tan pronto como se presione el botón.
Este evento permanece activado mientras se hace clic en el botón y se mantiene presionado. El sintaxis Para el mousedown el evento es $(selector).mousedown(function). El mouseup El evento se activará tan pronto como se suelte el botón del mouse. El sintaxis Para el mouseup el evento es $(selector).mouseup(function). Aquí hay un ejemplo.
<script type="text/javascript">
$("#imgMouse").mousedown(function(){
$("div").css("background-color", "Yellow")
});
$("#imgMouse").mouseup(function(){
$("div").css("background-color", "LightGrey")
});
</script> Mouseover, Mouseout, Mouseenter y Mouseleave
Mouseover generalmente se combina con mouseout mientras mouseenter generalmente se combina con mouseleave. El mouseover y mouseentery, mouseout y mouseleave los eventos son similares pero tienen diferencias específicas.
En el caso de mouseenter y mouseleave, los eventos se desencadenan cuando el puntero se mueve dentro y fuera del elemento enlazado. El mouseover y mouseout los eventos también se activan cuando el puntero sale de cualquier elemento secundario dentro del elemento enlazado.
En el siguiente ejemplo, el mouseenter y mouseleave los eventos se activan en el elemento div izquierdo, mientras que el mouseover y mouseout los eventos se desencadenan en el div derecho.
Notarás que cuando te mouseover y mouseout sobre un elemento secundario (span) en el div derecho, el contador también aumenta. Donde en el div izquierdo, este comportamiento no ocurre.
<script type="text/javascript">
var a = 0;
$("#div1").mouseenter(function () {
$("#span1-1").text("mouseenter");
$("#span1-2").text(++a);
});
$("#div1").mouseleave(function () {
$("#span1-1").text("mouseleave");
$("#span1-2").text(++a);
});
var b = 0;
$("#div1").mouseover(function () {
$("#span2-1").text("mouseover");
$("#span2-2").text(++b);
});
$("#div1").mouseout(function () {
$("#span2-1").text("mouseout");
$("#span2-2").text(++b);
});
</script> Movimiento del ratón
El mousemove El evento ocurre cada vez que el puntero del mouse se mueve dentro de un elemento específico. El mousemove() método activa la mousemove evento, o si se establece el parámetro de la función, especifica lo que sucede cuando un mousemove evento ocurre. Aquí hay un ejemplo.
<script type="text/javascript">
$(document).mousemove(function (e) {
$("span").text(e.pageX + ", " + e.pageY);
});
</script> 