在JavaScript中捕获DOM单击事件，然后在以后的时间触发

Question

现在已经研究了这一概念了一段时间，但仍不确定最佳方法。

我想捕获点击事件，并触发以后随访的任何(默认或手动附加(事件。更具体地说，当单击.container中的元素时，我想记录一个跟踪事件。记录下来后，我想恢复点击元素的行为。此功能可以以这种方式实现吗？

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

我正在将单击事件添加到该元素(是否已经存在其他元素(，并捕获和防止其默认行为：

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

我知道我可以访问srcElement.href，并且在捕获<a>标签上的单击事件时可以使用window.location，但这真的是最好的方法吗？如果该元素是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);

注意：一段时间后，bin URL将超时。但是，您可以创建自己的并玩游戏，看看它如何捕获所有动作。