Захват события клика DOM в JavaScript и запуск в более позднее время

Question

Уже некоторое время исследую эту концепцию, но до сих пор не уверены в наилучшем подходе.

Я хотел бы захватить событие щелчка и инициировать любые события (по умолчанию или прикрепленные вручную), которые последуют за ним позже. Более конкретно, я хочу записать событие отслеживания, когда элемент в .container нажата. После того, как это было записано, я хочу возобновить поведение нажатого элемента. Эта функциональность достижима таким образом?

<div class="container">
    <span>My Text</span>
    <a href="/myurl">My Link</a>
    <button type="submit">My Button</button>
</div>

Я добавляю событие click к элементу (независимо от того, есть ли у него другие или нет), и фиксирую и предотвращаю его поведение по умолчанию:

elementInsideContainer.addEventListener('click',e => {
    e.preventDefault();
    // submit some click tracking data via ajax
    // carry on with other events on element
});

Я знаю, что у меня есть доступ к srcElement.href и мог window.location пользователь там при захвате события клика на <a> тег, но разве это может быть лучшим способом сделать это? Что делать, если элемент type=submit кнопка или просто <span>CLICK ME!</span> что я хочу отслеживать (как показано выше)? Читал о dispatchEvent(event) но не уверен, что это то, что я ищу.

Answer 1

Я думаю, вам не следует блокировать поток событий только потому, что вы хотите записать событие. Если это часть аналитики, она всегда должна быть за пределами вашей основной реализации. Я предлагаю вам зарегистрировать общий обработчик событий на этапе захвата и отслеживать вызовы событий через него. События должны продолжаться независимо от того, сохранены ли события в вашей базе данных или нет. Этот скрипт должен находиться в вашем менеджере тегов. Таким образом, вам не нужно копировать сценарий снова и снова.

Пример реализации:

var body = document.querySelector('body');

body.addEventListener('click',e=> { 
   console.log(e.target, e.type)
   var data = {"name": e.target.nodeName, "id": e.target.id, "class": e.target.classList, "eventType": e.type };
    fetch("https://requestb.in/14ihhbd1", {
        body: JSON.stringify(data),
        method: 'POST',
    mode: 'cors', 
    });
}, true);

Примечание. Через некоторое время URL-адрес корзины будет отключен. Но вы можете создать свой собственный и поиграть с ним и посмотреть, как он фиксирует все действия.