HoverIntent in a Backbone app

Question

I'd like to use the HoverIntent jQuery plugin in a backbone event in the most concise way possible.

Here are the events (simplified for clarity):

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

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

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

Basically, I don't want the herky-jerky showing and hiding as someone runs a mouse across the page, so HoverIntent seems to be the way to go. I've already included in my project and it's ready to go... but I'm not clear on how to properly invoke it in a backbone view. Suggestions?

Answer 1

There are some different versions of hoverintent that add custom events that you should be able to use in Backbone. Take a look at: https://github.com/LeMisterV/jquery.hoverintent. You should be able to use mouseenterintent and mouseleaveintent.

Answer 2

Note that the plugin in the accepted answer is no longer maintained and calls depreciated jQuery functions. The plugin can be updated to work with the current version of jQuery by replacing $.event.handle.call(this.elem, this.event) with $.event.dispatch.call(this.elem, this.event) on line 120 of the plugin.

However, even after patching the compatibility issues, I found that the plug in was too glitchy and unresponsive for my purposes. Instead, I spoofed the hoverintent feature set by wrapping my mouseenter/mouseleave callbacks with a setTimeout check to see if the element was still hovered. For example:

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

Adjust the timer on the timeout to your liking and the function only executes if the user continues to hover after a certain delay.