How to bind multiple eventhandlers for hoverIntent

问题:

I have the following code in one of my js files

$('#elementID').hoverIntent({
    over: function() {//function#1 body},
    out: function() {// function#2 body}
});

and in another one of my js files I want to add another method to hoverIntent. But the new binding overwrites the previous one and only the new one will execute.

$('#elementID').hoverIntent({
    over: function() {//function#3 body}
});

so I want both function#1 and function#3 to be executed on hover.

is that even possible with hoverIntent?

if not would you please point me in another direction so I can do that?

NOTE: I don't have permission to change the first file. I just want to add extra functionality to the hover.

Thank you.

回答1:

One way would be to modify the plugin hoverIntent so that it's configuration variable, cfg, is public. After line cfg = $.extend(cfg, g ? { over: f, out: g } : f ); in the plugin, add:

cfg = $.extend(cfg, g ? { over: f, out: g } : f );
$.fn.hoverIntent.cfg = cfg;

Then, you can do this:

$("#elementID").hoverIntent({
    over:   function(){ $(this).val("over"); },
    out:    function(){ $(this).val("out"); }
});

var cfg = $("#elementID").hoverIntent.cfg;
$.extend(cfg, { over: function(){ $(this).val("new over"); } });
$("#elementID").hoverIntent(cfg);

It's not ideal, but I'm not sure of another way to do this without modifying the plugin, extending the configuration variable, and re-initializing #elementID.

UPDATE 1:

I previously misunderstood OP's request. He needed the function#1 and #3 but not #2 to fire:

$("#elementID").hoverIntent({
    over:   function(){ //function #1 },
    out:    function(){ //function #2 }
});

var cfg = $("#elementID").hoverIntent.cfg;
var oldOver = cfg.over; // function #1

$.extend(cfg, { 
    out: false,
    over: function(){
    oldOver(); // call oldOver aka function #1 above
    // function #3
}});
$("#elementID").hoverIntent(cfg);

UPDATE 2:

My solution of above does not work because it merely creates a global variable for cfg which is then modified by any additional usage of $.hoverIntent.

Here is another stab at it using the $.data() method instead:

After line cfg = $.extend(cfg, g ? { over: f, out: g } : f ); in the plugin, add:

cfg = $.extend(cfg, g ? { over: f, out: g } : f );
$(this).data('cfg', cfg);

Then:

$("#elementID").hoverIntent({
    over:   function(){ //function #1 },
    out:    function(){ //function #2 }
});

var cfg = $("#elementID").data('cfg');
var oldOver = cfg.over; // function #1

$.extend(cfg, { 
    out: false,
    over: function(){
    oldOver(); // call oldOver aka function #1 above
    // function #3
}});
$("#elementID").hoverIntent(cfg);

回答2:

I know this is an old question, but it came up on search, so I'm plugging my answer here in case anyone else runs across it.

The hoverIntent plugin isn't meant to handle multiple callbacks, so I've patched a version that is. It's not fully tested for cross-browser compatibility, but since everything's done through jQuery's APIs it should be okay.

Github link

回答3:

Looks to me like the hoverIntent plugin isn't set up to support multiple event handlers. You'll probably have to patch the hoverIntent code to make this work.