有没有办法让 div 后面的按钮可点击，而不禁用 div 中的按钮？

Posted 2023-02-24

【中文标题】有没有办法让 div 后面的按钮可点击，而不禁用 div 中的按钮？

【英文标题】：Is there any way to make buttons behind a div clickable, without disabling the buttons IN the div?

【发布时间】：2014-07-23 14:53:49

【问题描述】：

我有一个使用 iFrame 加载动态标题的网页（长话短说，我们有一个包含 Shopify 页面的大型网站；该网站上的每个其他页面都使用 Ektron 小部件来加载标题，但我可以'不要在 Shopify 代码中这样做，所以我使用 iFrame 从单独的页面加载标题）。标题有需要工作的按钮，以及单击登录按钮时打开的模式窗口。模态窗口是问题所在。我的 iFrame 目前是标题本身的大小（330px）；如果 iFrame 窗口大于该窗口，它会覆盖页面下方的内容并使这些按钮无法点击。我无法将“pointer-events:none”添加到 iFrame，因为我需要 iFrame 标头中的按钮才能工作。但是，当登录模式打开时，它会被截断，因为 iFrame 不够大，无法显示整个内容。我也不能将 iFrame 高度设置为 1000px 并使用 z-index 将其放在其他内容的后面，因为当我这样做时，Shopify 页面上的内容会显示在模式窗口的顶部。

我尝试的最后一件事是动态更改 iFrame 的高度，以便在单击登录按钮时，iFrame 的高度增加以显示整个模式。但是，由于 iFrame 内容与 Shopify 页面的域不同，因此我无法将 iFrame 定位为标题文档的父级。

我真正想做的是使 iFrame 的高度足够大以显示模态窗口，同时使 iFrame 后面的按钮可点击，而不禁用 iFrame 中的按钮。有什么方法可以在 div 中的 AND 后面启用按钮？

【参考方案1】：

这将是一个非常糟糕的用户体验，你真的应该考虑做其他事情。但无论如何， 至少在较新的浏览器中，您可以在 iframe 上放置 pointer-events: none 样式，这不会让它捕获任何点击。然后，您在 iframe 中模态内部的按钮上放置 pointer-events: auto，以便至少它们正确注册点击。这样，您将实现点击。

当然，所有现代浏览器都支持pointer-events（但不支持 IE10 及更低版本）

【讨论】：

这不起作用，我在 iFrame 中设置了 pointer-events:none 和 pointer-events:all 在按钮上，但 iFrame 中的所有内容都无法点击。

抱歉，不是全部，而是自动