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

注意：bin url会在一段时间后超时。但是你可以自己创建并玩它，看看它是如何捕获所有动作的。

在JavaScript中捕获DOM单击事件并在以后触发

1 个答案: