destino al hacer clic

Question

Mira este código:

<div> 
    <a href = "#"><span>Click me MAN !</span></a> 
</div> 

<script type = "text/javascript"> 
    window.onload = function() { 
     document.body.addEventListener ("click", function (event) { 
      var target = event.target; 

      alert ("Returns \"" + target.nodeName + "\". Just want \"" + target.parentNode.nodeName + "\"") 
     }, false); 
    } 
</script> 

se puede ver el elemento "span" dentro de un "enlace", cuando el "enlace" se hace clic en el objetivo actual es el mismo "span". ¿Cómo puede el "event.target" devolver el "enlace" en lugar de "span"?

Gracias y no, no quiero usar "parentNode".

Answer 1

Con su enfoque, que o bien tienen que atravesar manualmente el DOM hasta llegar a un elemento <a> o adjuntar al oyente el propio enlace y utilizar this.

Minimizar el número de oyentes de eventos generalmente es una buena idea, así que aquí hay un ejemplo de cómo recorrer el DOM. Tenga en cuenta que el detector de eventos no funcionará en IE, que no es compatible con el método addEventListener() de los nodos DOM.

ejemplo vivo: http://jsfiddle.net/timdown/pJp4J/

function getAncestor(node, tagName) { 
    tagName = tagName.toUpperCase(); 
    while (node) { 
     if (node.nodeType == 1 && node.nodeName == tagName) { 
      return node; 
     } 
     node = node.parentNode; 
    } 
    return null; 
} 

document.body.addEventListener("click", function(event) { 
    var target = getAncestor(event.target, "a"); 
    if (target !== null) { 
     alert(target.nodeName); 
    } 
}, false); 

Answer 2

no puedes usar

<span><a href="#">Click me</a></span> ? 

Answer 3

Añadir las puntas este CSS JavaScript. Obtendrás event.target que quieras.

a > *, 
button > *{ 
    pointer-events:none; 
}