Question

我想以最简洁的方式在骨干事件中使用HoverIntent jQuery插件。

以下是事件（为简洁起见而简化）：

events:
 'mouseenter'                      : 'onMouseEnter'
 'mouseleave'                      : 'onMouseLeave'

onMouseEnter: ->
  @$('.foo').show()      

 onMouseLeave: ->
  @$('.foo').hide()

基本上，我不希望当有人在页面上移动鼠标时显示和隐藏，因此HoverIntent似乎是要走的路。我已经把它包含在我的项目中了，它已经准备好了...但是我不清楚如何在骨干视图中正确地调用它。建议？

Answer 1

有一些不同版本的hoverintent可以添加您应该能够在Backbone中使用的自定义事件。看看：https://github.com/LeMisterV/jquery.hoverintent。您应该可以使用mouseenterintent和mouseleaveintent。

Answer 2

请注意，不再维护已接受答案中的插件，并调用折旧的jQuery函数。通过在插件的第120行上用$.event.handle.call(this.elem, this.event)替换$.event.dispatch.call(this.elem, this.event)，可以更新插件以使用当前版本的jQuery。

然而，即使修补了兼容性问题，我发现插件太脆弱而且没有响应我的目的。相反，我通过使用setTimeout检查包裹我的mouseenter / mouseleave回调来欺骗hoverintent功能集，以查看该元素是否仍然悬停。例如：

function eventCallback(){
    setTimeout(function() {
        if ($(e.target).is(":hover")) {
            //do your code
        }
     }, 100);
}

根据您的喜好调整超时时间，只有当用户在一定延迟后继续悬停时才会执行该功能。

Backbone应用程序中的HoverIntent

2 个答案: