Eventos del ratón jQuery – Barcelona Geeks

Este artículo explicará los diferentes eventos del mouse que ocurren en función de las posiciones del mouse en un elemento HTML en particular.

Eventos de ratón en jQuery:

mouseenter y mouseleave
ratón arriba y ratón abajo
mouseover y mouseout

mouseenter y mouseleave: el evento mouseenter ocurre cuando el mouse se coloca sobre el elemento HTML y el evento mouseleave ocurre cuando el mouse se retira del elemento.

Javascript

<!DOCTYPE html>
<html>
  
<head>
    <script src="jquery.js"></script>
</head>
  
<body bgcolor="cyan">
    <p id="key">Original Text</p>
  
  
    <script>
        $("document").ready(function () {
            $("#key").mouseenter(enter);
            $("#key").mouseleave(leave);
            function enter() {
                $("#key").text(
                    "mouseenter event has occurred");
            }
            function leave() {
                $("#key").text(
                    "mouseleave event has occurred");
            }
        });
    </script>
</body>
  
</html>

Producción:

Al cargar la página web:
Eventos MouseEnter y MouseLeave:

Eventos MouseUp y MouseDown:

mouseup y mousedown requiere un clic del mouse para que ocurra.

JavaScript

<html>
    <body bgcolor="#ff00ff">
        <p id="key">Original Text</p>
    </body>
        <script src = "jquery.js"></script>
        <script>
          $("document").ready(function()
           { 
              $("#key").mouseup(up);
              $("#key").mousedown(down);
              function up()
               {
                 $("#key").text("mouseup event has occurred");
               }
              function down()
               {
                 $("#key").text("mousedown event has occurred");
               }
          });
        </script>
</html>

Producción:

En la página web de destino:
Eventos MouseUp y MouseDown:

Mouseover y Mouseout:

Estos eventos ocurren cuando el mouse se coloca sobre algún elemento HTML específico.

JavaScript

<html>   
    <body bgcolor="#87FF2A">
        <p id="key">Original Text</p>
    </body>
    <script src = "jquery.js"></script>
        <script>
            $("document").ready(function()
           { 
              $("#key").mouseover(over);
              $("#key").mouseout(out);
               function over()
                {
                  $("#key").text("mouseover event has occurred");
                }
               function out()
                {
                  $("#key").text("mouseout event has occurred");
                }
          });
        </script>   
</html>

Producción:

Cargando página web:
Eventos MouseOver y MouseOut:

Publicación traducida automáticamente

Artículo escrito por Chakradhar_Chinni y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Javascript

JavaScript

JavaScript

Deja una respuesta Cancelar la respuesta