¿Cómo evito que se active el evento onclick de un padre cuando se hace clic en un ancla secundaria?

Agradecemos tu apoyo para extender nuestros tutoriales en referencia a las ciencias informáticas.

Solución:

Los eventos aparecen en el punto más alto del DOM en el que se ha adjuntado un evento de clic. Entonces, en su ejemplo, incluso si no tuviera ningún otro elemento explícitamente en el que se pueda hacer clic en el div, cada elemento secundario del div haría subir su evento de clic en el DOM hasta que el controlador de eventos de clic del DIV lo atrape.

Hay dos soluciones para esto: verificar quién realmente originó el evento. jQuery pasa un objeto eventargs junto con el evento:

$("#clickable").click(function(e) {
    var senderElement = e.target;
    // Check if sender is the 
 element e.g.
    // if($(e.target).is("div")) 
    window.location = url;
    return true;
);

También puede adjuntar un controlador de eventos de clic a sus enlaces que les indique que detengan el burbujeo de eventos después de que se ejecute su propio controlador:

$("#clickable a").click(function(e) 
   // Do something
   e.stopPropagation();
);

Use el método stopPropagation, vea un ejemplo:

$("#clickable a").click(function(e) 
   e.stopPropagation();
);

Como dijo jQuery Docs:

stopPropagation El método evita que el evento se expanda en el árbol DOM, lo que evita que los controladores principales sean notificados del evento.

Tenga en cuenta que no evitar que otros oyentes manejen este evento(por ejemplo, más de un controlador de clic para un botón), si no es el efecto deseado, debe usar stopImmediatePropagation en lugar de.

Aquí mi solución para todos los que buscan un código que no sea jQuery (javascript puro)

document.getElementById("clickable").addEventListener("click", function( e ));

Su código no se ejecutará si se hace clic en los hijos de los padres

Calificaciones y reseñas

---

---

Utiliza Nuestro Buscador