javascript - 如何让所有页面元素不对点击使用react

Question

我正在尝试制作一个具有“选择”功能的扩展:让用户单击页面上的任何元素并查看它的 xpath。

但是，为了使其可用，我必须防止元素在单击时使用react:我不想单击超链接将我转发到另一个页面、按钮提交表单等。

我该怎么做？

UPD:我只需要 Chrome 浏览器

Answer 1

我认为最简洁的方法是在捕获阶段将一个事件处理程序绑定(bind)到body，并防止事件传播/默认行为。

您可以使用 event.target 获取对单击元素的引用:

document.body.addEventListener('click', function(event) {
    event.preventDefault();
    event.stopPropagation();
    console.log(event.target);
}, true);

优点是该事件处理程序将是第一个被触发的，无论其他哪些事件处理程序绑定(bind)到页面中的元素(当然，除非页面将类似的事件处理程序绑定(bind)到 body，但通常事件处理程序是在冒泡阶段绑定(bind)的)。

有关更多信息，请参阅quirksmode.org - Event order和 MDN - addEventListener .

DEMO