javascript - preventdefault not working

jQuery on() stopPropagation no funciona?

Question

Parece que no puedo conseguir que esto deje de propagarse ...

  $(document).ready(function(){
      $("body").on("click","img.theater",function(event){ 
          event.stopPropagation();    
          $(''.theater-wrapper'').show();
      }); 

       // This shouldn''t fire if I click inside of the div that''s inside of the 
       // `.theater-wrapper`, which is called `.theater-container`, anything else it should.
       $(".theater-wrapper").click(function(event){
           $(''.theater-wrapper'').hide();
       }); 
  });

Consulte este jsfiddle

Answer 1

En respuesta a tu jsfiddle @Dylan

Aquí: Cuando haces clic en la mancha blanca no debería cerrarse. jsfiddle.net/Cs8Kq - Dylan

Cambio

if ($(event.target).is(''img.theater'')){

a

if ($(event.target).is(''.theater-container'')){

y funcionará.

Resolví esto usando console.log (event.target) en el controlador de eventos y solo usé el selector que se desconectó cuando hice clic en el área blanca de la que estás hablando.

Habría comentado en su lugar, pero no tengo suficiente polvo de estrellas y monedas.

EDITAR: Me gusta esto jsfiddle.net/heNP4/

Answer 2

La mejor manera de hacerlo es:

$(".theater-wrapper").click(function(event){
    if (!$(event.target).is(''img.theater'')){
        $(''.theater-wrapper'').hide();
    }
}); 

Me funciona con un acordeón y una casilla.

Answer 3

Ya que estás usando on elemento body y no directamente en img.theater el evento va a ir más img.theater del elemento body y así es como funciona.

En el curso del evento, se .theater-wrapper evento de " .theater-wrapper elements" para que lo esté viendo.

Si no está creando ningún elemento dinámico, adjunte el controlador de eventos de clic directamente en el elemento img.theater .

$("img.theater").click(function(event){
    event.stopPropagation();    
    $(''.theater-wrapper'').show();
}); 

Alternativamente, puede verificar el destino del evento click dentro .theater-wrapper elementos .theater-wrapper , click controlador y no hacer nada.

$(".theater-wrapper").click(function(event){
    if ($(event.target).is(''img.theater'')){
         event.stopPropagation();
         return;
    }
    $(''.theater-wrapper'').hide();
}); 

Answer 4

use event.stopImmediatePropagation () Funcionó para mí