Как обработать нажатую ссылку в JavaScript?

Question

Как я могу обработать ссылку, у которой нет идентификатора? У него просто есть имя класса, например "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

Если вы управляете исходным кодом, вы можете добавить свой скрипт в строку.

<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")
}

Answer 4

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

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/