如何处理JavaScript中的点击链接？

Question

如何处理没有ID的链接？它只有一个类名，如“classbeauty”。

现在我需要知道用户是否点击了链接。 如果链接被点击，我只需要拨打alert("yes link clicked");。

我不知道如何处理JavaScript中的事件。

我该怎么做？

Answer 1

如果jQuery是一个选项：

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

如果您需要纯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!"); 
    } 
} 
} 

如果你需要它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"); }; 

这是纯顺便说一下，JavaScript。这里的每个人都喜欢jQuery（包括我）。

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) 

您可以在此链接测试： http://jsfiddle.net/e7rSb/

Answer 5

我不知道这是否是一种选择，但我会翻转标志链接被点击的时候，然后就测试该变量。

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

很简单，纯JS :)

Answer 6

如果控制源代码，你可以添加你的脚本嵌入。

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

如果你的目标的现代浏览器，你可以用getElementsByClassName选择元素。这里有几个人提出了他们自己的这个函数的实现。

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