Захват всего события <a>click

Я собираюсь добавить функцию javascript для захвата всех событий <a> на странице html.

Итак, я добавляю глобальную функцию, которая управляет всеми событиями <a> click, но не добавляет onclick для каждого (ни с помощью .onclick=, ни attachEvent(onclick...), ни inline onclick=). Я оставлю каждый <a> так же просто, как <a href="someurl"> внутри html, не касаясь их.

Я пробовал window.onclick = function (e) {...} но это просто захватывает все клики Как указать только клики на <a> и извлечь ссылки внутри <a>, которые вы нажимаете?

Ограничение. Я не хочу использовать библиотеки exra, такие как jQuery, просто ванильный javascript.

Ответы

Ответ 1

Вы можете обрабатывать все щелчки, используя window.onclick, а затем фильтровать с помощью event.target

Пример, который вы задали:

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

Ответ 2

Используйте что-то вроде:

document.body.onclick = function(e){
  e = e || event;
  var from = findParent('a',e.target || e.srcElement);
  if (from){
     /* it 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;
}

Этот метод называется делегирование событий

[ edit] добавлена функция, позволяющая клиенту нажимать на ширину ссылок вложенные html-элементы, например:
<a ...>link text</a>

Ответ 3

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

Рабочая демонстрация.

Ответ 4

Вам нужно учесть, что ссылка может быть вложена с другими элементами и хочет пересечь дерево обратно к элементу "a". Это работает для меня:

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

См. https://jsfiddle.net/hnmdijkema/nn5akf3b/6/

Ответ 5

ваша идея делегировать событие в окно, а затем проверить, является ли "event.target" ссылкой, является одним из способов (лучше будет document.body). Проблема в том, что он не будет работать, если вы нажмете на дочерний элемент node вашего элемента. Подумайте:

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

target будет элементом , а не ссылкой. Это означает, что проверка e.target не будет работать. Таким образом, вам нужно будет сканировать все дерево dom, чтобы проверить, является ли элемент с щелчком потоком элемента <a>.

Другим методом, который требует меньше вычислений при каждом щелчке, но стоит больше инициализировать, было бы получить все теги <a> и прикрепить ваше событие в цикле:

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: зачем я конвертирую HTMLCollection в массив? вот ответ.)

Ответ 6

Вы также можете попробовать:

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

});

Он работает, я просто тестировал!

Рабочая демонстрация: http://jsfiddle.net/CR7Sz/

Где-то в комментариях вы упомянули, что хотите получить значение "href", которое вы можете сделать с этим:

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
    }

});

Демо: http://jsfiddle.net/CR7Sz/1/

Ответ 7

Попробуйте jQuery и

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

В этой функции вы можете извлечь значение href таким образом:

$(this).attr('href')

Ответ 8

Я думаю, этот простой код будет работать с jquery.

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

Без JQuery:

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

Вышеприведенный результат даст тот же результат.

Ответ 9

Очень просто:

document.getElementById("YOUR_ID").onclick = function (e) {...}

Селектор - это то, что вы хотите выбрать, поэтому скажем, что у вас есть кнопка с именем

<a href="#" id="button1">Button1</a>

Код для этого:

document.getElementById("button1").onclick = function (e) { alert('button1 clicked'); }

Надеюсь, что это поможет.