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

Question

我已经在 <button> 元素上实现了一个可关闭的弹出窗口，其中 type="submit" 用于表单。

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

Use the focus trigger to dismiss popovers on the next click that the user makes.

For proper cross-browser and cross-platform behavior, you must use the <a> tag, not the <button> tag, and you also must include the role="button" and tabindex attributes.

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> 后，如果用户点击页面上的其他位置或弹出窗口本身，则弹出窗口不可关闭。这会遮挡表单元素(防止其被查看)，因此需要修复:

是否有某种形式的解决方法或修复程序我可以在此处应用以使弹出窗口在点击它或网页上的其他地方(Chrome android 浏览器上的默认行为)时适用于 iOS/Safari，同时保留使用 <button> 元素表单功能？

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

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

Answer 1

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

<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 和 bootstrap 的带有 data-trigger="focus"的弹出框，因为如果你看一下 bootstrap 示例 ( http://getbootstrap.com/javascript/#dismiss-on-next-click )，即使在他们的页面