移动网络上的 iframe 上的按钮不可点击

Question

我试图将按钮绝对放置在iframe上。但是，当在移动网络中查看我的应用程序时，不会记录任何按钮单击；相反，点击会在其下方的 iframe 上注册。

完全相同的实现也适用于非移动网络。

这是我当前使用的代码：

<div style={{ width: '100vw', height: '100vh', display: 'flex', position: 'relative' }} />
   <button
      style={{ position: 'absolute', top: 0, bottom: 0, zIndex: 1  }}
      onClick={() => console.log('button clicked')}
   >
      click here
   </button>

   <iframe style={{ width: '100%' }} src={src} />
</div>

我尝试过的其他一些事情：

• z-index将的设置iframe为较低的数字（iframe仍然会被点击）
• 禁用（pointer-events按钮iframe点击仍未注册）
• 将其包裹button在一个div
• 将其包裹iframe在一个div
• 停止传播点击事件button