Cible sur cliquez sur

Regardez ce code:

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

Vous pouvez voir l'élément "span" à l'intérieur d'un "lien", lorsque le "lien" est cliqué, l'objectif actuel est de même de "durée". Comment "de l'événement.cible" retour "lien" au lieu de "durée".

Merci et non, je ne veux pas utiliser "parentNode".

Pourquoi êtes-vous exactement à l'écoute pour un clic sur le corps au lieu de simplement le ciblage de la balise d'ancrage?
C'est une bonne idée de réduire les gestionnaires d'événements à un minimum et d'utiliser le fait que la plupart des événements de la bulle en haut de l'arborescence DOM, une technique connue sous le nom de événement délégation. C'est peut être ce que l'OP est en train de faire.

OriginalL'auteur Caio | 2011-01-10

  1. 7

    Avec votre approche, vous devez manuellement parcourir le DOM jusqu'à ce que vous frappez une <a> élément ou joindre l'auditeur de faire le lien lui-même et l'utilisation this.

    En minimisant le nombre d'écouteurs d'événement est généralement une bonne idée, voici un exemple de la façon de parcourir le DOM. Notez que l'écouteur d'événement ne fonctionne pas dans IE, qui ne prend pas en charge la addEventListener() méthode des nœuds DOM.

    Live exemple: 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);

    OriginalL'auteur Tim Down

  2. 1

    Ajouter le css conseils pour JavaScript.
    Vous obtiendrez d'événement.cible que vous souhaitez.

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

    OriginalL'auteur piayo

  3. 0

    Ne pouvez-vous pas simplement utiliser 

    <span><a href="#">Click me</a></span> ?
    Quel est le point de la plage alors? Il devient complètement inutile.
    Comment vous comprendre? Les styles aplpied sur elle sont toujours valables pour le contenu du lien...

    OriginalL'auteur Cray