在 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 并且可以window.location 那里的用户在捕获<a> 标记上的点击事件时，但这真的是最好的方法吗？如果元素是我想要跟踪的type=submit 按钮或只是一个<span>CLICK ME!</span> 怎么办（如上所示）？一直在阅读有关 dispatchEvent(event) 的信息，但不确定它是否是我正在寻找的。​​p>

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 会在一段时间后超时。但是您可以创建自己的并使用它，看看它是如何捕捉所有动作的。