Сделать каждую ссылку как кнопку?

Question

[RuhHost]

Доброго времени суток. Была поставлена задача написать сайт на js + Ajax для внутренней работы элементы вызываются через onclick="function('/url/');" все хорошо работает.

Появилась мысль убрать onclick="" и сделать так, чтобы при нажатие на любую ссылку вызвалась функция она определяла атрибут href="#home" и вызывала js функцию. Как это можно реализовать?

Answer 1

[Егор Тельнов]

Если я правильно понял, что вам нужно сделать:

const links = document.querySelectorAll('a');

links.forEach(function (currentLink) {
    const hrefAttribute = currentLink.getAttribute('href');
    
    currentLink.addEventListener('click', () => yourFunction(hrefAttribute));
})

Вроде должно работать.

Comments

[RuhHost]

Это получается, что при загрузке страницы все перебиратеся и начинает выполняться функция, а нужно чтобы функция выполнялась только по клику на

[Сергей delphinpro]

RuhHost, повесьте клик на документ

document.addEventListener('click', e => {
  if (e.target.tagName === 'A') {
    e.preventDefault();
    alert (e.target.href);
  }
})

[RuhHost]

Сергей delphinpro, Супер, почти как надо)
По клику на любой из ссылок показывает правильный url , но действие дублируется количеству ссылку на странице.

[Сергей delphinpro]

RuhHost, что? что там дублируется, не ясно.
Всё отлично работает https://jsfiddle.net/95bh6Lfr/

[RuhHost]

Все супер спасибо! Я использовал еще

const links = document.querySelectorAll('a');

links.forEach(function (currentLink) {
так как думал это дополнение к приведшему ответу.
Спасибо еще раз, лойс

[dom1n1k]

Только если вам вдруг нужен IE, это работать не будет, потому что он не поддерживает NodeList.forEach

[xmoonlight]

dom1n1k, Polyfill for IE11 missing NodeList.forEach

[xmoonlight]

Сергей delphinpro, оформи отельным ответом и выберем его решением.

[Сергей delphinpro]

xmoonlight, Ответ Егора вполне тянет на решение. Я лишь немного скорректировал под требования вопрошающего.

[Сергей delphinpro]

Равно как и ответ Дмитрия ниже. Одна и та же суть в разных воплощениях.

[xmoonlight]

Сергей delphinpro, ОК. Готово! Спасибо!

Answer 2

[Дмитрий Беляев]

function onLinkClick(event) {
  event.preventDefault(); // выключаем стандартный функционал браузера (переход)
  const {href} = event.target; // извлекли полный адрес из ссылки (даже для относительных ссылок вернет абсолютный адрес)
  const hrefAsInHTML = event.target.getAttribute('href'); // извлекли href таким какой он есть в html
  // любая Ваша логика
}

for(const link of document.getElementsByTagName('a')) {
  link.addEventListener('click', onLinkClick);
}

Comments

[RuhHost]

Похоже на рабочий способ, но чет не получается запустить.

function onLinkClick(event) {
  event.preventDefault(); // выключаем стандартный функционал браузера (переход)
  const href = event.target; // извлекли полный адрес из ссылки (даже для относительных ссылок вернет абсолютный адрес)
  const hrefAsInHTML = event.target.getAttribute('href'); // извлекли href таким какой он есть в html
  alert(hrefAsInHTML);
}

for(const link of document.getElementsByTagName('a')) {
  link.addEventListener('click', onLinkClick);
}

[Сергей delphinpro]

RuhHost,

вам показали const {href} = event.target;
вы пишете const href = event.target;

найдите отличие

[RuhHost]

Сергей delphinpro, Так я и так и так попробовал уже) Я думал это опечатка

[RuhHost]

Ошибку пишет (index):1 Uncaught SyntaxError: Unexpected end of input в логе

[Сергей delphinpro]

RuhHost,
{href} - эта хрень не работает наверное пока в браузерах

пишите href = event.target.href;

[RuhHost]

Сергей delphinpro, хз не получается, пишет ошибку методом тыка убирает, ругается на этот элемент

for(const link of document.getElementsByTagName('a'))

[Сергей delphinpro]

RuhHost, с for..of тоже какие траблы были, не помню уже, может сейчас и нормально. Обычно этот код через бабель прогоняется. Иил пишется по старинке, без новых фич языка.

[Дмитрий Беляев]

RuhHost, у Вас что за браузер? и где Вы такую древность нарыли?
Сергей delphinpro, es6 работает на 100% в современных браузерах.