css - Bootstrap 工具提示导致屏幕在 iPad 上跳转

Question

因此，在使用 Knockout.js 将工具提示应用于某些 KO 绑定(bind)的 HTML 元素时，我使用 knockout-bootstrap.js 库来协助 Bootstrap 工具提示初始化。

<a href="#" data-bind="attr: { tabindex: -1 }, tooltip: { title: buyerHelp, placement: 'top', trigger: 'click', container: 'body' }"><i class="glyphicon glyphicon-help"></i></a>

我使用 trigger: 'click' 而不是悬停，因为悬停工具提示在使用 iPad 显示后不会再次隐藏。当我点击工具提示图标时，工具提示显示正常，但如果滚动页面，它会跳回顶部。我不确定如何处理这个问题。

我目前使用的是 Bootstrap 3.0，但在使用 Boostrap 2.3 时遇到了同样的问题谢谢!

Answer 1

当您点击时，链接是否真的被点击了？就像页面在点击后试图加载 anchor 的 href 值一样？由于整个标记未包含在您的示例中，我不确定它是否是一个 anchor 。而且我不确定 knockout-bootstrap.js 库是否确保阻止数据绑定(bind)事件返回(因为它们会在默认的点击事件上)。如果 anchor 试图跟随点击链接，您可以尝试观察点击事件并阻止数据绑定(bind)中的事件。比如在tooltip之后:

data-bind="attr: { tabindex: -1 }, tooltip: { title: sellerHelp, placement: 'top', trigger: 'click' }, click: function(data, event) { event.preventDefault(); }"

希望对您有所帮助!

一般来说，最好将处理程序放在 viewModel 中并从那里阻止它，而不是内联。

阅读 knockout 中处理点击事件的方式可能会很好:http://knockoutjs.com/documentation/click-binding.html