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

Actualmente estoy usando jQuery para hacer clic en un div y en este div también tengo anclajes. El problema con el que me encuentro es que cuando hago clic en un ancla, ambos eventos de clic se activan (para el div y el ancla). ¿Cómo evito que se active el evento onclick del div cuando se hace clic en un ancla?

Aquí está el código roto:

JavaScript

var url = $("#clickable a").attr("href");

$("#clickable").click(function() {
    window.location = url;
    return true;
})

HTML

<div id="clickable">
    <!-- Other content. -->
    <a href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

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 seleccionable en el div, cada elemento secundario del div burbujeará su evento de clic en el DOM hasta que el controlador de eventos de clic del DIV lo detecte.

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 <div> 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 indica que dejen de burbujear 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 haga burbujear el árbol DOM, evitando que cualquier controlador principal sea notificado del evento.

Tenga en cuenta que no impide 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 usarlo stopImmediatePropagation.

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 ){
    e = window.event || e; 
    if(this === e.target) {
        // put your code here
    }
});

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

también puedes probar esto

$("#clickable").click(function(event) {
   var senderElementName = event.target.tagName.toLowerCase();
   if(senderElementName === 'div')
   {
       // do something here 
   } 
   else
   {
      //do something with <a> tag
   }
});

Si no tiene la intención de interactuar con el / los elemento / s interno / s en ningún caso, entonces una solución CSS puede ser útil para usted.

Simplemente configure los elementos internos a pointer-events: none

en tu caso:

.clickable > a {
    pointer-events: none;
}

o para apuntar a todos los elementos internos en general:

.clickable * {
    pointer-events: none;
}

Este truco fácil me ahorró mucho tiempo mientras desarrollaba con ReactJS

El soporte del navegador se puede encontrar aquí: http://caniuse.com/#feat=pointer-events

Si tiene varios elementos en el div en el que se puede hacer clic, debe hacer esto:

$('#clickable *').click(function(e){ e.stopPropagation(); });

Usar return false;o e.stopPropogation();no permitirá que se ejecute más código. Se detendrá el flujo en este punto mismo.

Escribir si alguien necesita (trabajó para mí):

event.stopImmediatePropagation()

De esta solución.

Alternativa en línea:

<div>
    <!-- Other content. -->
    <a onclick='event.stopPropagation();' href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

Aquí hay un ejemplo usando Angular 2+

Por ejemplo, si desea cerrar un componente modal si el usuario hace clic fuera de él:

// Close the modal if the document is clicked.

@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void {
  this.closeModal();
}

// Don't close the modal if the modal itself is clicked.

@HostListener('click', ['$event'])
public onClick(event: MouseEvent): void {
  event.stopPropagation();
}

Debe evitar que el evento llegue (burbujee) al padre (el div). Vea la parte sobre burbujear aquí , y la información de API específica de jQuery aquí .

Para especificar algún subelemento como no cliqueable, escriba la jerarquía css como en el siguiente ejemplo.

En este ejemplo, detengo la propagación a cualquier elemento (*) dentro de td dentro de tr dentro de una tabla con la clase ".subtable"

$(document).ready(function()
{    
   $(".subtable tr td *").click(function (event)
   {
       event.stopPropagation();
   });

});

ignoreParent () es una solución pura de JavaScript.

Funciona como una capa intermedia que compara las coordenadas del clic del mouse con las coordenadas de los elementos secundarios. Dos simples pasos de implementación:

1. Ponga el código ignoreParent () en su página.

2. En lugar del onclick original del padre = "parentEvent ();" , escribir:

onclick="ignoreParent(['parentEvent()', 'child-ID']);"

Puede pasar identificadores de cualquier número de elementos secundarios a la función y excluir otros.

Si hizo clic en uno de los elementos secundarios, el evento principal no se activa. Si hizo clic en el elemento primario, pero no en ninguno de los elementos secundarios [proporcionados como argumentos], se activa el evento principal.

código ignoreParent () en Github

Si está en contexto en línea, en HTML intente esto:

onclick="functionCall();event.stopPropagation();

En caso de que alguien tuviera este problema usando React, así es como lo resolví.

scss:

#loginBackdrop {
position: absolute;
width: 100% !important;
height: 100% !important;
top:0px;
left:0px;
z-index: 9; }

#loginFrame {
width: $iFrameWidth;
height: $iFrameHeight;
background-color: $mainColor;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
margin-top: calc(-1 * #{$iFrameHeight} / 2);
margin-left: calc(-1 * #{$iFrameWidth} / 2);
border: solid 1px grey;
border-radius: 20px;
box-shadow: 0px 0px 90px #545454; }

Componente render ():

render() {
    ...
    return (
        <div id='loginBackdrop' onClick={this.props.closeLogin}>
            <div id='loginFrame' onClick={(e)=>{e.preventDefault();e.stopPropagation()}}>
             ... [modal content] ...
            </div>
        </div>
    )
}

Al agregar una función onClick para el modal hijo (div de contenido), se evita que los eventos de clic del mouse alcancen la función 'closeLogin' del elemento padre.

Esto hizo el truco para mí y pude crear un efecto modal con 2 divs simples.

agregue alo siguiente:

<a href="http://foo.com" onclick="return false;">....</a>

o return false;desde el controlador de clic para me #clickablegusta:

  $("#clickable").click(function() {
        var url = $("#clickable a").attr("href");
        window.location = url;
        return false;
   });

Todas las soluciones son complicadas y de jscript. Aquí está la versión más simple:

var IsChildWindow=false;

function ParentClick()
{
    if(IsChildWindow==true)
    {
        IsChildWindow==false;
        return;
    }
    //do ur work here   
}


function ChildClick()
{
    IsChildWindow=true;
    //Do ur work here    
}

<a onclick="return false;" href="http://foo.com">I want to ignore my parent's onclick event.</a>