destinazione al clic

Question

Guardate questo codice:

<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> 

è possibile vedere l'elemento "span" all'interno di un "link", quando il "link" è scattato l'obiettivo è lo stesso "arco". Come può "event.target" restituire "link" invece di "span".

Grazie e no, non voglio utilizzare "parentNode".

Answer 1

Con il vostro approccio, hai attraversare manualmente il DOM fino a colpire un elemento <a> o allegare l'ascoltatore al link stesso e utilizzare this.

Ridurre al minimo il numero di ascoltatori di eventi è generalmente una buona idea, quindi ecco un esempio di come attraversare il DOM. Si noti che il listener di eventi non funzionerà in IE, che non supporta il metodo addEventListener() dei nodi DOM.

vivo esempio: 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

Non puoi semplicemente usare

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

Answer 3

Aggiungere le punte questo css per JavaScript. Otterrete event.target che volete.

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