1

Been researching this concept for a while now, and still not certain on best approach.

I'd like to capture a click event and trigger any (default or manually attached) events that follow it at a later time. More specifically, I want to record a tracking event when an element in the .container is clicked. After it's been recorded, I want to resume the behaviors of the clicked element. Is this functionality attainable in this manner?

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

I'm adding a click event to the element (whether it has others already or not), and capturing and preventing it's default behavior:

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

I know I have access to srcElement.href and could window.location the user there when capturing a click event on an <a> tag, but could that really be the best way to do this? What if the element is a type=submit button or just a <span>CLICK ME!</span> that I want to track (as shown above)? Been reading about dispatchEvent(event) but not sure if it's what I'm looking for.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
toad
  • 400
  • 2
  • 13
  • What is the purpose of doing this? Is it only to capture events. And what is the reason behind triggering at a later time? – karthick Feb 13 '18 at 00:06
  • I want to record each time the an element in the .container is clicked. After it's been recorded, I want to resume the behaviors of the clicked element. – toad Feb 13 '18 at 00:30

1 Answers1

1

I think you shouldn't block the event flow just because you want to record an event. If this is part of analytics it should always be outside your main implementation. I suggest you to register a generic event handler in capturing phase and track the event calls through that. The events should continue irrespective of whether the events are saved in your database or not. This script should reside in your tag manager. So you don't have to copy the script again and again.

Sample implementation: 

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

Note: The bin url will timeout after sometime. But you can create your own and play with it and see how it captures all the actions.

karthick
  • 11,998
  • 6
  • 56
  • 88
  • Thanks for the insight. So there's really no way to wait for the recording service to complete and continue the event flow with a callback or similar? – toad Feb 13 '18 at 15:20
  • I don't think its possible. The moment you prevent an event the event is cancelled although you can trigger the event again, by simulating an event click, the event handler you wrote will handle that again and you will be going in an endless loop. So the idea is not feasible if you block the event. – karthick Feb 13 '18 at 17:39