web-dev-qa-db-fra.com

Capture de tous les <a> événements sur les clics

Je pense à ajouter une fonction javascript pour capturer tous les événements de clic <a> dans une page html.

J'ajoute donc une fonction globale qui régit tous les événements de clic <a>, mais sans ajouter onclick à chacun (ni à l'aide de .onclick= ni de attachEvent(onclick...) ni de onclick= en ligne). Je laisserai chaque <a> aussi simple que <a href="someurl"> dans le code HTML sans les toucher. 

J'ai essayé window.onclick = function (e) {...} Mais cela ne capture que tous les clics Comment spécifier uniquement les clics sur <a> et extraire les liens à l'intérieur de <a> sur lequel vous cliquez?

Restriction : Je ne veux utiliser aucune bibliothèque exra comme jQuery, juste le javascript de Vanilla.

javascripteventscapture
14
user1589188

Vous pouvez gérer tous les clics avec window.onclick puis filtrer avec event.target

Exemple que vous avez demandé:

<html>
<head>
<script type="text/javascript">
window.onclick = function(e) { alert(e.target);};
</script>
</head>
<body>
<a href="http://google.com">google</a>
<a href="http://yahoo.com">yahoo</a>
<a href="http://facebook.com">facebook</a>
</body>
</html>
14
Artur Udod

Utilisez quelque chose comme:

document.body.onclick = function(e){
  e = e || event;
  var from = findParent('a',e.target || e.srcElement);
  if (from){
     /* it's a link, actions here */
  }
}
//find first parent with tagName [tagname]
function findParent(tagname,el){
  while (el){
    if ((el.nodeName || el.tagName).toLowerCase()===tagname.toLowerCase()){
      return el;
    }
    el = el.parentNode;
  }
  return null;
}

La technique s'appelle délégation d'événements

[modifier] ajout d'une fonction permettant d'activer un gestionnaire de clics pour les éléments HTML imbriqués, tels que:
<a ...><b><i>link text</i></b></a>

28
KooiInc
​window.onclick = function (e) {
    if (e.target.localName == 'a') {
        console.log('a tag clicked!');
    }
}​

La démo de travail.

8
xdazz

Vous devez prendre en compte le fait qu'un lien peut être imbriqué avec d'autres éléments et que vous souhaitez repasser dans l'arborescence jusqu'à l'élément 'a'. Cela fonctionne pour moi:

window.onclick = function(e) {
  var node = e.target;
  while (node != undefined && node.localName != 'a') {
    node = node.parentNode;
  }
  if (node != undefined) {
    console.log(node.href);
    /* Your link handler here */
    return false;  // stop handling the click
  } else {
    return true;  // handle other clicks
  }
}

Voir par exemple https://jsfiddle.net/hnmdijkema/nn5akf3b/6/

4
Hans Dijkema

votre idée de déléguer l'événement à la fenêtre et de vérifier ensuite si "event.target" est un lien, est un moyen d'aller (mieux serait document.body). Le problème ici est que cela ne fonctionnera pas si vous cliquez sur un nœud enfant de votre élément. Pense:

<a href="#"><b>I am bold</b></a>

la target serait l'élément <b>, pas le lien. Cela signifie que la vérification de e.target ne fonctionnera pas . Vous devrez donc explorer toute l’arborescence des doms pour vérifier si l’élément cliqué est un descendant d’un élément <a>. 

Une autre méthode nécessitant moins de calcul à chaque clic, mais coûtant plus cher à initialiser, serait d’obtenir toutes les balises <a> et d’attacher votre événement dans une boucle:

var links = Array.prototype.slice.call(
    document.getElementsByTagName('a')
);

var count = links.length;
for(var i = 0; i < count; i++) {
    links[i].addEventListener('click', function(e) {
        //your code here
    });
}

(PS: pourquoi convertir HTMLCollection en tableau? voici la réponse. )

3
Roman

Essayez jQuery et

$('a').click(function(event) { *your code here* });

Dans cette fonction, vous pouvez extraire la valeur href de cette façon:

$(this).attr('href')
1
FLCL

Vous pouvez également essayer d'utiliser ceci:

var forEach = Array.prototype.forEach;
var links = document.getElementsByTagName('a');
forEach.call(links, function (link) {
    link.onclick = function () {
        console.log('Clicked');
    }

});

Cela fonctionne, je viens de tester!

Démo de travail: http://jsfiddle.net/CR7Sz/

Quelque part dans les commentaires que vous avez mentionnés, vous voulez obtenir la valeur 'href', vous pouvez le faire avec ceci:

var forEach = Array.prototype.forEach;
var links = document.getElementsByTagName('a');
forEach.call(links, function (link) {
    link.onclick = function () {
        console.log(link.href); //use link.href for the value
    }

});

Démo: http://jsfiddle.net/CR7Sz/1/

1
Akshat Mittal

Certaines réponses acceptées ne fonctionnent pas avec des éléments imbriqués tels que: <a href="..."><font><u>link</u></font></a>

Il existe une solution de base dans la plupart des cas: 

var links = document.getElementsByTagName('a');
for(var i in links)
{
    links[i].onclick = function(e){
        e.preventDefault();
        var href = this.href;
        // ... do what you need here.
    }
}
0
MichałKraków

Je suppose que ce code simple fonctionnera avec jQuery.

 $("a").click(function(){
    alert($(this).attr('href'));
});

Sans JQuery:

window.onclick = function(e) { 
if(e.target.localName=='a')
    alert(e.target);
};

Ce qui précède produira le même résultat.

0
Vishal Srinivasan