如何定位窃取DOM焦点的函数？

Question

我正在尝试调试我的应用程序与 Stripe元素组件库 的集成。在沙盒模式下一切正常，但我们在生产环境中遇到了3D安全认证过程中的问题。这涉及加载一个iframe到我们的应用程序中，其中包含来自信用卡发行商的表单（通常是通过技术合作伙伴，如Arcot）。

表单正确加载和其按钮按预期工作，但是 短信验证码输入框 不起作用。每次点击输入框时，都会立即将焦点推回iframe的元素上。这使得无法输入任何内容，因为我触摸键盘时，输入框已经失去了焦点。 作为参考，可以使用document.getElementById('enterPIN').value = '123456';更改输入框的值。

我不确定我的应用程序是否触发了focus()调用（我认为不是），或者它是否是 iframe 代码或甚至是 Stripe 的代码的一部分。 有没有一种很好的方法来监视DOM事件并对每个事件的触发情况进行堆栈跟踪？

- carpiediem

Answer 1

我发现这个链接很有用：https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/focus

在Chromium控制台中添加document.activeElement作为实时表达式，可以让你实时观察哪个元素被聚焦。

- qz-

Answer 2

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

1. 我打开了事件监听器面板（在浏览器开发工具的元素选项卡中），并删除了我能找到的所有内容，但似乎这并没有改变页面的行为 - 焦点仍然被窃取。幸运的是，我还注意到一些由Material UI库定义的监听器。
2. 我使用monitorEvents()获取了一些更多的细节，但src和target值并没有什么帮助，event.relatedTarget始终为空。

最后，我找到了这个讨论，意识到我的MUI对话框组件在点击由其内容触发的iframe时会窃取焦点。这很容易通过添加disableEnforceFocus属性来修复。

- carpiediem