悬停事件

正如我上面提到的，Bootstrap 中的 popover 组件使用的悬停行为不够灵活，无法满足我的需求，但如果你查看 trigger 选项的文档，则 hover 只是其中一个可能的值。 一个引起我注意的是 manual 模式，在这种模式下，可以通过 JavaScript 调用手动显示或删除弹出窗口，这种模式可以让我自由地实现悬停逻辑，所以我将使用该选项并实现我自己的悬停事件处理程序，并以我需要的方式工作。

所以我的下一步是将一个“hover”事件附加到页面中的所有链接。 使用 jQuery，可以通过调用 element.hover(handlerIn, handlerOut) 将悬停事件附加到任何 HTML 元素。 如果在元素集合上调用这个函数，jQuery 方便地将事件附加到所有元素上。 这两个参数是两个函数，分别在用户将鼠标指针移入和移出目标元素时调用对应的函数。

app/templates/base.html ：悬停事件。

    $(function() {
        $('.user_popup').hover(
            function(event) {
                // mouse in event handler
                var elem = event.currentTarget;
            },
            function(event) {
                // mouse out event handler
                var elem = event.currentTarget;
            }
        )
    });

事件参数是一个事件对象，它包含了一些有用的信息。 在本处，我使用 event.currentTarget 来提取事件的目标元素。

浏览器在鼠标进入受影响的元素后立即调度悬停事件。 针对弹出行为，你只想鼠标停留在元素上一段时间才能激活，以防当鼠标指针短暂通过元素但不停留在元素上时出现弹出闪烁。 由于该事件不支持延迟，因此这是我需要自己实现的另一件事情。 所以我打算在“鼠标进入”事件处理程序中添加一秒计时器：

app/templates/base.html ：悬停延迟。

    $(function() {
        var timer = null;
        $('.user_popup').hover(
            function(event) {
                // mouse in event handler
                var elem = event.currentTarget;
                timer = setTimeout(function() {
                    timer = null;
                    // popup logic goes here
                }, 1000);
            },
            function(event) {
                // mouse out event handler
                var elem = event.currentTarget;
                if (timer) {
                    clearTimeout(timer);
                    timer = null;
                }
            }
        )
    });

setTimeout() 函数在浏览器环境中才可用。 它需要两个参数，函数和毫秒单位的时间。 setTimeout() 的效果是函数在给定的延迟后被调用。 所以我添加了一个函数（现在是空的），将在悬停事件的一秒钟后被调用。 由于 JavaScript 语言中的闭包机制，此函数可以访问在外部作用域中定义的变量，例如 elem 。

我将 timer 对象存储在 hover() 调用之外定义的 timer 变量中，以使 timer 对象也可以被“mouse out”处理程序访问。 我需要这么做的原因是为了获得良好的用户体验。 如果用户将鼠标指针移动到其中一个用户链接中，并在移动它之前停留了半秒钟，我不希望该 timer 继续运行并调用显示弹出窗口的函数。 所以我的鼠标移出事件处理程序检查是否有一个活动的 timer 对象，如果有，就取消它。