如何找到窃取 DOM 焦点的函数？

Question

我正在尝试调试我的应用程序与 Stripe 的 Elements 组件库 之间的集成。在沙盒模式下一切正常，但我们在 3D Secure 身份验证 过程中遇到了问题。这涉及将 iframe 加载到我们的应用程序中，其中包含来自信用卡发卡机构的表格（通常通过技术合作伙伴，如Arcot）。

表单正确加载并且其按钮按预期工作，但元素（对于 SMS 一次性代码）没有行为。每次我单击输入时，都会立即将焦点推回 iframe 的元素。这使得无法输入任何内容，因为当我触摸一个键时，输入不在焦点上。 作为参考，可以使用

document.getElementById('enterPIN').value = '123456';

更改输入值

我不确定我的应用程序是否触发了

focus()

调用（我不这么认为）或者它是否是 iframe 代码甚至 Stripe 的一部分。 有没有好的方法来监视 DOM 事件并对每个事件的触发器进行堆栈跟踪？

Answer 1

我尝试了两种策略。两者都没有给出明显的答案，但它们确实为我的搜索指明了正确的方向。

1. 我打开了Event Listeners面板（在我的浏览器开发者工具的Elements选项卡中）并删除了我能找到的所有东西，但这似乎并没有真正改变页面的行为-焦点一直被偷走.幸运的是，我还注意到一些由 Material UI 库定义的监听器。
2. 我用

   monitorEvents()

   获得更多细节，但 src 和目标值没有太大帮助，

   event.relatedTarget

   总是空的。

最后，我找到了 this discussion 并意识到每当我点击由其内容触发的 iframe 时，我的 MUI 对话框组件正在窃取焦点。通过添加

disableEnforceFocus

属性可以很容易地解决这个问题。

Answer 2

我发现这很有帮助：https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/focus

在 Chromium 控制台中添加

document.activeElement

作为实时表达式，可以让您实时观看哪个元素被聚焦。