javascript - sobre - Evitando que el niño dispare el evento de clic de los padres

porque la monogamia

Question

Considere el siguiente fragmento de código:

<div class="div-outer">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <div class="div-inner" style="background:red">
        Curabitur hendrerit vehicula erat, ut gravida orci luctus vitae.
    </div>
</div>

Ahora supongamos que el div exterior tiene un click vivo asociado con él. ¿Cómo me aseguro de que el click vivo no se click cuando hago click en cualquier lugar de la div interna?

Editar:

Aquí está el JS según lo solicitado

$(".div-outer").live("click",function(){alert("hi")}); 

Esto no debe activarse al hacer clic en ".inner-div"

Answer 1

Cree un nuevo detector de click para la event.stopPropagation() interna y llame a event.stopPropagation() en ese nuevo evento.

me gusta

$(''div-outer'').on(''click'',''div-inner'',function(e){
    e.stopPropagation();
});

Answer 2

Debe agregar un detector de eventos al elemento secundario interno y cancelar la propagación del evento.

En llanura JS algo como

document.getElementById(''inner'').addEventListener(''click'',function (event){
   event.stopPropagation();
});

es suficiente. Tenga en cuenta que jQuery proporciona la misma facilidad :

$(".inner-div").click(function(event){
    event.stopPropagation();
});  

o

$(".inner-inner").on(''click'',function(event){
    event.stopPropagation();
});  

Answer 3

Una solución alternativa es agregar una regla de eventos de puntero CSS al elemento secundario:

CSS:

#childElement {
    pointer-events: none;
}

JavaScript:

document.getElementById("childElement").style.pointerEvents = "none";

Answer 4

puede hacer esto agregando un evento de clic en la división interna y use ya sea return false; o event.stopPropagation();

$(".div-inner").click(function(){

  return false;
})

o

$(".div-inner").click(function(event){

  event.stopPropagation();
})

Answer 5

usa stopPropagation en tu archivo js

 $(".eventclick").click(function(e) {
    e.stopPropagation();
});