Target по щелчку

Question

Посмотрите этот код:

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

Вы можете увидеть элемент «пролет» внутри «связь», когда «ссылка» щёлкнули текущая цель такой же «промежуток». Как «event.target» возвращает «ссылку» вместо «span».

Спасибо и нет, я не хочу использовать «parentNode».

Answer 1

С вашим подходом, вы должны либо вручную пройти вверх по DOM, пока не ударил <a> элемент или прикрепить слушателя к ссылке себя и использовать this.

Минимизировать количество слушателей событий, как правило, хорошая идея, так что вот пример того, как пересечь DOM. Обратите внимание, что прослушиватель событий не работает в IE, который не поддерживает метод узлов DOM addEventListener().

Живой пример: 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

Разве вы не можете просто использовать

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

Answer 3

Добавьте советы это CSS для JavaScript. Вы получите event.target вы хотите.

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