En el siguiente ejemplo, ¿por qué un solo clic en el botón no solo activa el detector de eventos que se agrega al botón, sino también el detector de eventos que se agrega al cuerpo? En otras palabras: ¿Por qué el color cambia a rojo en lugar de verde? ¿Y cómo previenes esto?
$("button").on("click", function() { // Change Color $("body").css({ "background-color": "#3FE1B0" }); // Add New Event Listener... $("body").on("click", function() { // ...Which Also Changes Color $(this).css({ "background-color": "#FF4F5E" }); }); }); /* Design Changes */ body { height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <button>Click Me!</button>Tu problema es la propagación de eventos . Lo que sucede cuando el usuario hace clic en el botón con su código original es:
La solución es simple: use el método stopPropagation del evento para evitar que se propague hacia arriba:
$("button").on("click", function(event) { // Change Color $("body").css({ "background-color": "#3FE1B0" }); // Add New Event Listener... $("body").on("click", function() { // ...Which Also Changes Color $(this).css({ "background-color": "#FF4F5E" }); }); event.stopPropagation(); }); /* Design Changes */ body { height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <button>Click Me!</button>Una fuente del problema es que al hacer clic en el <button> dentro del <body> activa el evento de clic tanto para el elemento <body> como para el elemento <button> . Debe usar event.stopPropagation() para evitar que el evento burbujee en el árbol DOM.
$("button").on("click", function(e) { $("body").css({ "background-color": "#3FE1B0" }); e.stopPropagation(); }); $("body").on("click", function(e) { $("body").css({ "background-color": "#FF4F5E" }); }); body { height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; } <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>Page Title</title> </head> <body> <button>Click Me!</button> </body> </html>Primero, debe reorganizar su código.
En segundo lugar, use stopPropagation para evitar que se activen ambos controladores de clics.
Pruebe el siguiente ejemplo:
$("body").on("click", function(e) { $(this).css({ "background-color": "#FF4F5E" }); }); $("button").on("click", function(e) { e.stopPropagation() $("body").css({ "background-color": "#3FE1B0" }); }); /* Design Changes */ body { height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <button>Click Me!</button>