Как сохранить некоторые данные о событии клика в JS?

Question

Я создаю приложение Analytics в js. Мне нужно получить текст от элемента, который нажимается. Я использую эту функцию для получения данных в настоящее время.

clickfunc = function(link) {
var t = link.innerText || link.textContent;
console.log(t);
}

Я называю эту функцию по ссылке как -

<a href="#work" onclick='clickfunc(this)'>

Проблема в том, что мне нужно получить данные из элемента без вызова функции в коде, как в GTM.

Любая помощь приветствуется.

Answer 1

Здесь, когда я вызвал функцию в <a href="#work" onclick='clickfunc(this)'>, мне нужно сделать функцию, которую не нужно вызывать, вот так.

Звучит так, как будто вы спрашиваете как использовать современную обработку событий, что является хорошей идеей.

Вы делаете это:

1. Удаление onclick из этого тега и либо:
   1. Добавление скрипта, который запускается после того, как этот элемент был создан, и подключает к нему обработчик; или
   2. Добавление сценария, который перехватывает click на элементе-предке и затем проверяет, когда щелчок щелкает по этому предку, прошел ли он через этот элемент. (Это называется делегирование события .)

Вот пример # 1:

<a href="#work">this is the #work element</a>
<a href="#life">this is something else</a>
<script>
document.querySelector("a[href='#work']").addEventListener("click", function() {
    console.log(this.textContent || this.innerText);
});
</script>

Обратите внимание, что этот код должен оцениваться после элемента существует. Есть несколько способов сделать это в современных браузерах:

1. Поместите его в тег script в конце документа, непосредственно перед закрывающим тегом </body>. Это работает в современных и старых и устаревших браузерах.
2. Или поместите атрибут defer в тег script (предполагается, что вы используете внешний скрипт с src; он не работает на встроенный скрипт). Работает в современных браузерах.
3. Или оберните код в обработчик для события DOMContentLoaded. Работает в современных и старых браузерах.

Вот пример # 2 (делегирование события):

<script>
document.addEventListener("click", function(e) {
    var a = e.target.closest("a[href='#work']");
    if (a) {
        // The event passed through the element on its way to the document
        console.log(a.textContent || a.innerText);
    }
});
</script>
<a href="#work">this is the #work element</a>
<a href="#life">this is something else</a>

Этот метод closest существует в современных и немного старых браузерах, но не в IE11. Если вам нужно использовать IE11-совместимый код:

document.addEventListener("click", function(e) {
    var a = e.target;
    while (a && a.nodeType === 1) {
        if (a.tagName === "A" && a.getAttribute("href") === "#work") {
            // The event passed through the element on its way to the document
            console.log(a.textContent || a.innerText);
            break;
        }
        a = a.parentNode;
    }
});

---

В комментарии вы спросили:

Могу ли я сделать это как var a = e.target.closest("a[href]") для ссылки на все теги имея href?

Да, это именно так. e.target.closest("a[href]") будет соответствовать первому элементу a, который имеет атрибут href, начиная с e.target и продвигаясь вверх через своих предков. e.target.closest("a[href^='#']") будет делать это только для a элементов, href которых начинается с #. Например, вот пример выше с двумя href="#xyz" элементами, которые регистрируют свой текст, и третьим href="http://example.com", который не соответствует, потому что он не совпадает:

<script>
document.addEventListener("click", function(e) {
    var a = e.target.closest("a[href^='#']");
    if (a) {
        // The event passed through the element on its way to the document
        console.log(a.textContent || a.innerText);
    }
});
</script>
<div><a href="#work">this is the #work element</a></div>
<div><a href="#life">this is the #life element</a></div>
<div><a href="http://example.com">this is the http://example.com element</a></div>

Answer 2

Я добавил код в тег script и поместил его в тег head. Таким образом, после загрузки dom он прикрепит прослушиватель кликов ко всем тегам, имеющим href.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.addEventListener('DOMContentLoaded', (event) => {
            document.querySelectorAll('a[href]').forEach(function (elms) {
                elms.addEventListener('click', function (link) {
                    var t = link.innerText || link.textContent;
                    console.log(t);
                });
            });
        });
    </script>
</head>

<body>
  <a href="#work">
  <a href="#abc">
</body>

</html>

Answer 3

Могу ли я предложить вам что-то вроде глобального наблюдателя?

document.addEventListener('click', watchAnchorClicks);

function watchAnchorClicks(event){
  if (event.target.tagName === 'A'){
    var anchor = event.target;
    console.log('Click on anchor with text ' + anchor.innerText + ' and href ' + anchor.href);
  }
}

<p>Paragraph with <a href="#anchor">anchor</a> in.</p>
<p>Yet another paragraph with other <a href="#another">other anchor</a> in.</p>