docelowa na kliknięcia

Question

Spójrz ten kod:

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

Można zobaczyć elementu „rozpiętość” wewnątrz „link”, gdy „Link” jest kliknięty obecny cel jest ten sam „rozpiętość”. W jaki sposób "event.target" może zwrócić "link" zamiast "span".

Dzięki i nie, nie chcę używać "parentNode".

Answer 1

W swoim podejściu, albo trzeba ręcznie przechodzić w górę DOM aż trafisz element <a> lub dołączyć słuchacza do połączenia się i korzystania this.

Minimalizowanie liczby detektorów zdarzeń jest generalnie dobrym pomysłem, więc oto przykładowy sposób przechodzenia przez DOM. Zauważ, że detektor zdarzeń nie będzie działał w IE, który nie obsługuje metody addEventListener() metody węzłów DOM.

żywo przykład: 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

nie można po prostu użyć

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

Answer 3

Dodaj wskazówki to CSS JavaScript. Dostaniesz event.target, który chcesz.