如何为绑定多个hoverIntent事件处理器？ [英] How to bind multiple eventhandlers for hoverIntent?

问题描述

我有以下的code在我的js文件中的一个

I have the following code in one of my js files

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

在我的js文件另外一个我想其他方法添加到hoverIntent。
但是，新的绑定将覆盖previous独一无二的新会执行。

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}
});

所以我想这两个功能的＃1和＃功能3要在悬停执行。

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

是，甚至有可能与hoverIntent？

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.

感谢您。

推荐答案

的一种方法是修改插件 hoverIntent ，以便它的配置变量， CFG ，是公开的。

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);

这是不理想，但我不知道的另一种方式来做到这一点，而无需修改插件，扩展配置变量，并重新初始化 #elementID 。

更新1：

我previously误解OP的请求。他所需要的功能＃1和＃3而不是2火灾：

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);

更新2：

我对上面的解决方案不起作用，因为它只是创造了 CFG 一个全局变量，然后通过 $。hoverIntent的任何附加使用修改。

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:

行 CFG = $ .extend后（CFG，G {过：F，出：绿}：F）; 在插件中添加：

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

然后：

$("#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);

这篇关于如何为绑定多个hoverIntent事件处理器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！