1

一段时间以来一直在研究这个概念，但仍然不确定最佳方法。

我想捕获一个点击事件并在以后触发任何（默认或手动附加的）事件。更具体地说，我想在.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)但不确定它是否是我正在寻找的。

4

1 回答 1

0

我认为你不应该仅仅因为你想记录一个事件就阻止事件流。如果这是分析的一部分，它应该始终在您的主要实现之外。我建议您在捕获阶段注册一个通用事件处理程序并通过它跟踪事件调用。无论事件是否保存在您的数据库中，事件都应该继续。此脚本应驻留在您的标签管理器中。因此，您不必一次又一次地复制脚本。

示例实现：

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

于 2018-02-13T01:19:50.917 回答