使 Bootstrap Popover 可点击 / SetTimeout 使用答案

【问题标题】：Make Bootstrap Popover Clickable / SetTimeout Use使 Bootstrap Popover 可点击 / SetTimeout 使用
【发布时间】：2012-03-28 12:00:54
【问题描述】：

我正在尝试让引导程序的“弹出框”可点击，因为当我将鼠标悬停在它上面时它保持打开状态。

我已经设法使用这个脚本 http://jsfiddle.net/CtuRx/5/ 来解决这个问题。

但是当我通过 jslint 运行它时，它抱怨 settimeout 在定义之前就被使用了。

想知道是否有人可以提供/解释一个更好的解决方案来创建和使用一个函数 - 在原始 .btn 类和 .popover 的 mouseleave 上定义和调用 settimeout 延迟。

谢谢！

【问题讨论】：

keepPopover 应该做什么？使用时未定义。

标签： javascript twitter-bootstrap

【解决方案1】：

Here's an alternate solution.

我将您的按钮包装在 div 中。

当鼠标进入wrapper div时，它会显示popover并自行扩展，为鼠标进入popover提供一个桥梁，而不会触发mouseleave。我们还在 popover 上放了一个 mouseleave，这样当我们离开 popover 时，包装器 div 会返回到它的默认宽度。

links.mouseenter(function (event) {

    var link = $(this);
    link.popover('show').width(180);

    $('.popover').mouseleave(function () {
        link.popover('hide').width(defaultWidth);
    });   
});

当鼠标离开按钮并进入到弹出框的桥时，我注意到由于事件冒泡而在包装器上触发了 mouseleave 事件。以下代码通过忽略鼠标事件来解决此问题，除非我们将包装器退出到正文。

links.mouseleave(function (event) {
    if (event.toElement === document.body) {
        $(this).popover('hide').width(defaultWidth);
    }           
});

尝试为包装器 div 添加边框以查看实际代码。还。您应该考虑将 CSS 隔开以使其更具可读性。

【讨论】：

似乎 event.toElement 在 Firefox 中不受支持。您还可以像 post 一样使用 event.relatedTarget。