Переопределить поведение по умолчанию для объектов ссылки ('a') в Javascript

Question

Я не знаю, возможно ли то, чего я пытаюсь достичь. Я хотел бы переопределить поведение по умолчанию для всех объектов привязки (тег A) для данной HTML-страницы. Я знаю, что могу перебрать все элементы A и динамически добавить вызов onclick к каждому из них из метода body element onload, но я ищу более абсолютное решение. Мне нужно, чтобы всем элементам A было присвоено действие onclick, которое вызывает метод, передающий свойство элемента href в качестве аргумента, поэтому следующее:

<a href="http://domain.tld/page.html">

Динамически становится:

<a href="http://domain.tld/page.html" onclick="someMethodName('http://domain.tld/page.html'); return false;">

Как я уже сказал, идеальный способ сделать это - каким-то образом полностью переопределить класс Anchor при загрузке документа. Если это невозможно, я прибегну к циклическому методу A elements (который я уже знаю, как это сделать).

Answer 1

Если вы не хотите перебирать все свои якорные элементы, вы можете просто использовать делегирование события , например:

document.onclick = function (e) {
  e = e ||  window.event;
  var element = e.target || e.srcElement;

  if (element.tagName == 'A') {
    someFunction(element.href);
    return false; // prevent default action and stop event propagation
  }
};

Проверьте приведенный выше пример здесь .

Answer 2

Использование jQuery:

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

function someMethodName(href)
{
    console.log(href);
    return false;
}

Answer 3

window.onload = function() {
    var anchorElements = document.getElementsByTagName('a');
    for (var i in anchorElements)
        anchorElements[i].onclick = function() {
            alert(this.href);
            return false;
        }
}

Это самый простой способ сделать это. Оберните <script type="text/javascript">...</script> в заголовок документа, и он будет работать при загрузке страницы.

Answer 4

Аналогично ответу Бенджи XVI, но с использованием querySelectorAll, например, внутри контейнера div с классом 'container' и использованием es6.

const $elems = document.querySelectorAll('.container a')
var elems = Array.from($elems)
elems.map(a => {
  a.onclick = (e) => {
    e.preventDefault()
    window.alert('Clicking external links is disabled')
  }
})

Answer 5

Решение CMS является лучшим решением. Обязательно обратите внимание, что вы можете получить лучшую производительность, если вы ссылаетесь на функцию или проверяете, что ее нужно запустить из строки, хранящейся в свойстве прототипа, установленном на базовом якоре / элементе, или декларативно на якоре / элементе. Используя это свойство, можно найти функцию, которую вы хотите вызвать, и вызывать из одной ветви решений, а не писать новую ветвь решений для каждой возможности. Если вы разбиваете или используете оператор с более чем одним или двумя случаями, вы должны начать это рассматривать, сегодня может быть хороший день для инверсии управления и стиля ввода кода.

Опять же, не используйте регистр, если вам нужно обработать несколько событий. Вместо этого используйте строковую композицию, чтобы построить путь к функции, которую нужно вызвать. Это требует добавления прототипа к вашим элементам "A", которые определяют значение по умолчанию и строку, которая будет составлена. Атрибут данных в элементе должен иметь возможность переопределить значение по умолчанию. По сути, мы просто хотим, чтобы сообщение и действие проходили по умолчанию и изменялись в разметке. Указанное действие должно быть опубликовано где-нибудь в виде API или другой доступной библиотечной функции и быть вызвано lib ['funName']. Просто дайте ему атрибут, не беспокойтесь об имени или идентификаторе. Прототип и атрибут будут полезны для отладки, потому что вам придется отсеивать.

Есть некоторые парни, работающие на клиентских маршрутизаторах, которые пытаются улучшить это.

Answer 6

Нет способа переопределить все события onlick элементов привязки. Вы можете добавить щелчок мыши к телу документа и иметь логику, чтобы увидеть, распространяется ли событие даже от элемента привязки, и выполнить событие в этом случае, но это решение может вызвать проблемы, если ваша страница сложная и не передает клики в некоторых случаях.

Я бы придерживался решения getElementsByTagName, если это возможно.