主干应用中的HoverIntent

Question

我想以最简洁的方式在主干活动中使用HoverIntent jQuery插件。

以下是事件(为清晰起见进行了简化)：

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

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

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

基本上，我不希望当有人在页面上运行鼠标时显示和隐藏赫基-干，所以HoverIntent似乎是可行的。我已经包含在我的项目中了，它已经准备好了……但我不清楚如何在主干视图中正确地调用它。有什么建议吗？

Answer 1

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

Answer 2

请注意，accepted中的插件不再维护，并调用折旧的jQuery函数。可以通过在插件的第120行将$.event.handle.call(this.elem, this.event)替换为$.event.dispatch.call(this.elem, this.event)来更新插件以与当前版本的jQuery一起工作。

然而，即使在修补了兼容性问题之后，我也发现插件对于我的目的来说太不灵敏和反应迟钝。相反，我通过使用setTimeout检查包装我的鼠标输入/鼠标离开回调来欺骗悬停意图特性集，以查看元素是否仍然悬停。例如：

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

根据您的喜好调整超时计时器，只有当用户在特定延迟后继续悬停时，该函数才会执行。