onclick Handler auf <a> Tags, finden Sie heraus, welches Tag geklickt wurde

Question

Ich habe 5 Anker-Tags auf meiner Seite. Wenn nun einer dieser Tags geklickt wird, möchte ich eine JavaScript-Funktion aufrufen. In dieser Funktion muss ich herausfinden, auf welchen der Anker geklickt wurde.

Wie kann das gehandhabt werden?
Ich möchte es in reinem JavaScript oder mit Dojo tun.

Answer 1

var anchors = document.getElementsByTagName("a"); 

for(var i = 0; i < anchors.length; i++) { 
    anchors[i].onclick = function() { 
     alert(this.id); 
     doStuff(id); 
     return false; 
    } 
} 

Demo: http://jsfiddle.net/FVWqT/1/

Hinweis, wenn Sie mehr als fünf Anker haben, und wollen nur bestimmte diejenigen zielen, könnten Sie nach Klasse filtern möchten, zum Beispiel:

var anchors = document.getElementsByTagName("a"); 

for(var i = 0; i < anchors.length; i++) { 
    if(anchors[i].className == "something") { 
     anchors[i].onclick = function() { 
      alert(this.id); 
      doStuff(id); 
      return false; 
     } 
    } 
} 

Answer 2

Anstatt für jeden Link in der Seite einen onclick-Handler zu definieren, können Sie für eine bessere Leistung Event-Delegierung für Links-Container verwenden (diese Technik passt perfekt zu Ihrer Aufgabe), z

(function() { 
    var divcnt = document.getElementById('linkcnt'); 
    divcnt.onclick = function(evt) { 

     var event = (evt || window.event), 
      target = (event.target || event.srcElement); 

     if (evt.target.tagName === 'A') { 
      // event.target is DOM reference to link you clicked 
      // evt.target.id is the ID; 
      alert(evt.target.id); 

      //callmyfunction(event.target) // Call a function with DOM reference 
     } 
    } 
})(); 

Sehen Sie ein funktionierendes Beispiel hier: http://jsfiddle.net/fcalderan/MSvvh/

Answer 3

Keine komplexen Konstrukte benötigt, versuchen Sie es, um sich selbst in der Adressleiste:

javascript:(
    function() { 
    for (var i=0; i<document.links.length; i++) 
     document.links[i].onclick = function() { 
     return confirm(this.href+'\nORLY?') 
     }; 
    } 
)();