如何检测自定义元素的子元素上的事件？

Question

我正在尝试编写一个脚本来检测对我无法控制的 HTML 页面的按钮的点击。

但是，如果我在文档上添加一个事件监听器，事件对象的目标是一个名为“c-sto_com_fs-content-page”的元素，而不是我的“a.btn-primary”按钮。在 Firefox 中，专有的 originalTarget 属性确实向我显示了正确的元素，但这并不是很大的帮助。 “c-sto_com_fs-content-page”元素位于我的按钮和文档正文之间的中间位置。 这个页面的 HTML 有点乱。

我想我可以简单地使用 querySelector 来访问按钮，并以这种方式连接事件侦听器，但是 document.querySelector("c-sto_com_fs-content-page a.btn-primary") 也返回 null。 document.querySelector("c-sto_com_fs-content-page") 返回自定义元素，但我无法使用此节点向下导航。就好像这个节点的孩子不存在一样。

如何让这个工作？

Answer 1

如果您想检测页面上按钮的点击，但无法控制页面的 HTML，您可以尝试一些方法。你可能会遇到的一个问题是事件对象的目标不是你感兴趣的按钮。

一个解决方案是在 Firefox 中使用

originalTarget

属性，它会显示正确的元素。然而，这不是一个通用的解决方案，可能不适用于其他浏览器。

另一个解决方案是使用

document.querySelector

找到您想要收听点击的按钮。但是，在某些情况下，这也可能不起作用。

如果您在使用

document.querySelector

时遇到问题，请尝试使用更具体的选择器。例如，不要使用

document.querySelector("a.btn-primary")

，而是尝试使用包含父元素的选择器，例如

document.querySelector("c-sto_com_fs-content-page a.btn-primary")

.

如果这些解决方案都不起作用，您可能需要使用不同的方法，例如使用浏览器扩展或像 Selenium 这样的工具与页面进行交互。

祝你的按钮点击检测好运！