asignando evento de clic a div pero no ancla dentro de él

Question

Una pregunta de jquery.

Tengo un div que contiene texto y una etiqueta de anclaje.

Quiero asignar un evento de clic a la etiqueta div y su contenido, EXCLUYENDO la etiqueta de anclaje.

Así que cuando hago clic en el div, aparece una ventana de alerta. Pero si hago clic en el ancla (eso está dentro del div), la alerta no debería ocurrir.

El div sería algo como esto:

<div id="myDiv"> 
    This is the content of the div. 
    <img src="blah.jpg" /> 
    <a href="somewhere.html">Click here</a>. 
    Some more content. 
</div> 

¿Alguna idea? Estoy usando jquery para asignar el evento click al div.

Answer 1

puede comprobar el destino del clic desde el <a> no tiene hijos, por ejemplo:

$("#myDiv").click(function(e) { 
    if(e.target.nodeName == 'A') return; 
    //click handler code 
}); 

Answer 2

Ampliando la respuesta de Nick, lo siguiente es lo que terminé usando ya que representa etiquetas anidadas.

function handleClick(e) { 
    var $current = $(e.target); 

    // return if we don't want to override another click event 
    // check current tag 
    var tags = ['A', 'BUTTON', 'INPUT']; 
    if (tags.indexOf(e.target.tagName) >= 0) 
     return; 
    // check parent tags 
    var ignoreClick = false; 
    $.each(tags, function(i, tag) { 
     console.log('checking tag', tag); 
     if ($current.parents(tag).length) { 
     ignoreClick = true; 
     return; 
     } 
    }); 
    if (ignoreClick) 
     return; 

    // do your normal click stuff here 
} 

JsFiddle