javascript - 用于桌面和移动平台的 Twitter bootstrap popover 触发器

Question

默认 popover触发选项是点击。但我需要将其更改为悬停。可以这样做:

$("#popover").popover({ trigger: "hover" });

但这对智能手机没有意义。用户无法阅读悬停触发的弹出窗口。

对于我网站的“div”部分，我使用“visible-desktop”或“隐藏桌面”。你能提供一个好的方法吗 使用悬停触发弹出窗口 - 适用于桌面 智能手机/平板电脑点击触发弹出窗口。 (我用的是bootstrap 2.3.1)

相关: Make Bootstrap Popover Appear/Disappear on Hover instead of Click

Answer 1

我最好的建议是检测是否有触摸事件。如果是(“无”悬停能力)，请使用“单击”...如果不是，请使用“悬停”。试试这个:

var is_touch_device = ("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch;
$("#popover").popover({
    trigger: is_touch_device ? "click" : "hover"
});

(触摸检测取自 Modernizr 库)

What's the best way to detect a 'touch screen' device using JavaScript?

Detecting touch screen devices with Javascript