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

Question

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

表单正确加载，其按钮按预期工作，但元素（对于 SMS 一次性代码）没有行为。每次我单击输入时，都会立即将焦点推回 iframe 的元素。这使得我无法输入任何内容，因为当我触摸按键时，输入内容已不在焦点上。作为参考，可以使用更改输入的值document.getElementById('enterPIN').value = '123456';

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

Answer 1

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

1. 我打开了“事件侦听器”面板（在浏览器开发人员工具的“元素”选项卡中）并删除了我能找到的所有内容，但这似乎并没有真正改变页面焦点的行为 - 焦点不断被偷走。幸运的是，我还注意到一些由 Material UI 库定义的侦听器。
2. 我曾经monitorEvents()获得更多详细信息，但 src 和目标值没有太大帮助，并且event.relatedTarget始终为空。

最后，我发现了这个讨论，并意识到每当我单击由其内容触发的 iframe 时，我的 MUI 对话框组件就会窃取焦点。通过添加该disableEnforceFocus属性可以轻松解决此问题。