移动网络上的 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>

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

• 将 iframe 的

  z-index

  设置为较低的数字（iframe 仍然会被点击）
• 在iframe上禁用

  pointer-events

  （按钮点击仍然没有注册）
• 将按钮包裹在 div 中
• 将 iframe 包裹在 div 中
• 单击按钮即可停止传播

Answer 1

不是真正的答案，但是，我有类似的问题，你解决了你的问题吗？