¿Cómo adjuntar una devolución de llamada onclick a un div pero no en un enlace dentro del div?

Question

HTML

<div class='item_container'> 

[...bunch of links and pictures...] 
<a class='item_owner'>John Doe</a> 

</div> 

Javascript

/** 
    Bind the onclick only if you hover on the item since we got a lot 
    of items and several events and plugins to setup on them. 
*/ 
$('.item_container').live('mouseenter', function(e){ 
    $this = $(this); 
    if (!$this.data('isSetup')) { 
    $this.click(function(e){ 
     // do magic 
     return false; 
    }); 
    [... a lot of other stuff] 
    $this.data({'isSetup': true}); 
    } 
}); 

Por supuesto, al hacer clic en cualquier parte del div, se realiza 'hacer magia'. Gracias a return false, si hago clic en cualquier enlace en el div, que todavía se realiza 'hacer magia' y no cambia la página, que es el comportamiento esperado.

Pero hay un enlace que se supone que realmente cambiar la página, el enlace propietario. El problema es que, con mi configuración actual, evito que funcione.

Answer 1

Debe detener la propagación del evento de los enlaces al padre .item_container.

Añadir este bloque con el código:

$('.item_container a.item_owner').live('click', function(e){ 
e.stopPropagation(); 
});