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

Question

我正在尝试调试我的应用与 Stripe's Elements component library 之间的集成。在沙盒模式下一切正常，但我们在3D Secure authentication 过程中遇到了生产问题。这涉及将 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 Dialog 组件都会窃取焦点。通过添加 disableEnforceFocus 属性可以轻松解决此问题。