在 iOS/Safari 上无法关闭焦点触发器的 Bootstrap Popover 错误

Question

我已经在带有type="submit" 的<button> 元素上实现了一个可关闭的弹出框，以便与表单一起使用。

正如 Bootstrap 文档明确指出的那样：

使用focus 触发器在下次单击时关闭弹出框 用户制作。

为了正确的跨浏览器和跨平台行为，您必须使用 <a> 标签，不是 <button> 标签，您还必须包含 role="button" 和 tabindex 属性。

http://getbootstrap.com/javascript/#popovers-examples

不过，弹出框可以通过用户使用hover 触发器的下一次点击来消除。我没有使用<a> 元素的选项，因为<button> 对应于表单提交（对长代码块表示歉意）：

<button data-placement="top" data-toggle="popover" data-trigger="hover" title="placeholder text" data-content="placholder text" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-block btn-success marg-bot-20">Subscribe to Best Hot Tub Updates <i class="fa fa-envelope"></i></button>

这里的问题是，在使用 Safari 网络浏览器的 iOS 移动设备上，弹出框是可以忽略的。一旦使用了<button>，如果用户点击页面上的其他地方或弹出框本身，弹出框就不会被关闭。这会遮挡表单元素（防止其被查看），因此需要修复：

是否有某种形式的解决方法或修复我可以在此处应用以使弹出框在点击它或在 iOS/Safari 的网页上的其他位置（Chrome android 浏览器上的默认行为）时消失，同时保留使用 @987654335表单功能的@元素？

可以在此处的开发站点上查看该问题：

http://www.the-session.co.uk/dev_standalone/

Answer 1

您可以使用<a> 元素并使其提交您的表单。因此，您将遵循引导程序的建议。

<a href="javascript:void(0)" onclick="document.getElementById('mc-embedded-subscribe-form').submit(); return false;" role="button" tabindex="0" data-placement="top" data-toggle="popover" data-trigger="hover" title="placeholder text" data-content="placholder text" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-block btn-success marg-bot-20">Subscribe to Best Hot Tub Updates <i class="fa fa-envelope"></i></a>

不过，真正的问题可能与 iOS 和带有 data-trigger="focus" 的引导程序弹出窗口有关，因为如果您查看引导程序示例 (http://getbootstrap.com/javascript/#dismiss-on-next-click)，它甚至不适用于 iOS他们的页面