Twitter启动弹出框触发器的桌面和移动平台 [英] Twitter bootstrap popover trigger for desktop and mobile platforms

问题描述

默认 popover 触发器选项是点击。但我需要改变它徘徊。它可以这样做：

Default popover trigger option is click. But I need to change it to hover. It can be done like this:

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

但这对智能手机没有意义。

But this doesn't make sense for smartphones. User can't read hover-triggered popover.

对于我的网站的 div 部分，我使用 visible-desktop 或hidden-desktop。你可以提供一个很好的方式
触发popover与悬停 - 桌面
触发popover与智能手机/平板电脑点击。
（我使用bootstrap 2.3.1）

For "div" parts of my site, I use "visible-desktop" or "hidden-desktop". Can you offer a good way to trigger popover with hover- for desktops trigger popover with click- for smartphones/tablets. (I use bootstrap 2.3.1)

相关：
使Bootstrap Popover在悬停而不是点击上出现/消失

推荐答案

我最好的建议是检测是否有触摸事件。如果是这样（没有悬停的能力），使用点击...如果不是，使用悬停。尝试这样：

My best suggestion is to detect whether there is a touch event. If so ("no" ability for hovering), use "click"...if not, use "hover". Try this:

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

（触摸检测来自Modernizr库）

(the touch detection was taken from the Modernizr library)

最好的如何使用JavaScript检测触摸屏设备？

使用Javascript检测触摸屏设备

这篇关于Twitter启动弹出框触发器的桌面和移动平台的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！