Comment gérer un lien cliqué dans JavaScript?

Question

Comment puis-je gérer un lien qui n'a pas d'identifiant? Il a juste un nom de classe comme "classbeauty".

Maintenant, j'ai besoin de savoir si un utilisateur a cliqué sur le lien. Si le lien est cliqué, j'ai juste besoin d'appeler alert("yes link clicked");.

Je ne sais pas comment gérer les événements en JavaScript.

Comment puis-je faire cela?

Answer 1

Si jQuery est une option:

$("a.classbeauty").click(function(){ 
    alert("yes link clicked"); 
}); 

Si vous avez besoin pur JavaScript:

var elements = document.getElementsByTagName("a"); 
for(var i=0; i<elements.length; i++){ 
    if (elements[i].className == 'classbeauty') { 
     elements[i].onclick = function(){ 
      alert("yes link clicked!"); 
    } 
} 
} 

Si vous avez besoin dans Greasemonkey:

function GM_wait() { 
    if(typeof unsafeWindow.jQuery != 'function') { 
     window.setTimeout(wait, 100); 
    } else {   
      unsafeWindow.jQuery('a.classbeauty').click(function(){ 
        alert('yes link clicked'); 
       }); 
    } 
} 
GM_wait(); 

Answer 2

function getElementsByClassName(class_name) { 
    var elements = document.getElementsByTagName('*'); 
    var found = []; 

    for (var i = 0; i < elements.length; i++) { 
     if (elements[i].className == class_name) { 
      found.push(elements[i]); 
     } 
    } 

    return found; 
} 

getElementsByClassName("YourClass")[0].onclick = function() { alert("clicked"); }; 

Ce pur javascript, en passant. Tout le monde ici aime jQuery (y compris moi).

Answer 3

for (var i= document.links.length; i-->0;) { 
    if (document.links[i].className==='classbeauty') { 
     document.links[i].onclick= function() { 
      alert('yes link clicked'); 
      return false; // if you want to stop the link being followed 
     } 
    } 
} 

Answer 4

function handleLinks(className, disableHref) { 
    var links = document.body.getElementsByTagName("a"); 

    for (var i = 0; i < links.length; i++) { 
     if (links[i].className == className) { 
      links[i].onclick = function(){ 
       alert('test') 
       if (disableHref) { 
        return false; //the link does not follow 
       } 
      } 
     } 
    } 

} 

handleLinks('test', true) 

vous pouvez le tester à ce lien: http://jsfiddle.net/e7rSb/

Answer 5

Je ne sais pas si cela est une option, mais je voudrais retourner un drapeau lorsque le lien est cliqué, et puis juste test pour cette variable.

//javascript 
var _cbClicked = false; 
function checkClicked() { 
    if (_cbClicked) alert("link was clicked"); 
    return false; 
} 

//html 
<a href="#" class="classbeauty" onclick="_cbClicked = true; return false;">Link Text</a> 
<a href="#" onclick="checkClicked();">Check Link</a> 

Très simple et pur JS :)

Answer 6

Si vous contrôlez le code source, vous pouvez ajouter votre ligne de script.

<a onclick="alert('yes link clicked'); return false">Link</a> 

Si vous ciblez les navigateurs modernes, vous pouvez sélectionner l'élément avec getElementsByClassName. Plusieurs autres personnes ici ont présenté leurs propres implémentations de cette fonction.

var node = document.getElementsByClassName('classbeauty')[0] 
node.onclick = function(event){ 
    event.preventDefault() 
    alert("yes link clicked") 
}