Ziel auf Klick

Question

diesen Code ein:

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

Sie können das Element „span“ in einem „Link“ sehen, wenn die „link“ geklickt wird das aktuelle Ziel ist den gleichen „span“. Wie kann das "event.target" "link" anstelle von "span" zurückgeben?

Danke und nein, ich möchte nicht "parentNode" verwenden.

Answer 1

Mit Ihrem Ansatz verwenden, müssen Sie entweder manuell den DOM durchqueren, bis Sie ein <a> Element treffen oder die Hörer auf den Link selbst anbringen und this verwenden.

Die Minimierung der Anzahl der Ereignis-Listener ist im Allgemeinen eine gute Idee, daher folgt hier ein Beispiel, wie das DOM durchlaufen werden kann. Beachten Sie, dass der Ereignis-Listener nicht im IE funktioniert, der die addEventListener()-Methode von DOM-Knoten nicht unterstützt.

anschauliches Beispiel: 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

können nicht nur Sie

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

Answer 3

Fügen Sie die diese CSS-Tipps für JavaScript. Sie erhalten event.target Sie wollen.

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