具有焦点触发功能的Bootstrap Popover错误在iOS / Safari上不可接受

Question

我已使用<button>在type="submit"元素上实施了一个可禁止的弹限窗口，用于表单。

正如Bootstrap文档明确指出：

  

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

     

对于正确的跨浏览器和跨平台行为，您必须使用   <a>标记，不 <button>标记，您还必须包含该标记   角色=＆＃34;按钮＆＃34;和tabindex属性。

Working with the CSS height property and percentage values

然而，使用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>，如果用户点击页面上的其他位置或弹出窗口本身，则弹出窗口不会被取消。这会模糊表单元素（阻止它被查看），因此需要修复：

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

是否存在某种形式的变通办法或修复方法我可以在此处应用以便在点击它或网页上的其他位置（Chrome浏览器的浏览器上的默认行为）时允许弹出窗口用于iOS / Safari，同时保留使用{{ 1}}表单功能的元素？

可以在开发网站上查看该问题：

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的popover with data-trigger =“focus”，因为如果你看一下bootstrap示例（http://getbootstrap.com/javascript/#dismiss-on-next-click），它对iOS不起作用甚至在他们的页面上