如何为hoverIntent绑定多个eventhandlers？

Question

我的一个js文件中有以下代码

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

在我的另一个js文件中，我想将另一个方法添加到hoverIntent。但是新的绑定会覆盖以前的绑定，并且只会执行新的绑定。

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

所以我希望function#1和function#3都能在悬停时被执行。

使用hoverIntent能做到这一点吗？

如果没有，你能告诉我另一个方向吗?这样我就可以做了。

注意:我没有更改第一个文件的权限。我只想给鼠标悬停添加额外的功能。

谢谢。

Answer 1

一种方法是修改插件hoverIntent，以便它的配置变量cfg是公共的。在插件中的cfg = $.extend(cfg, g ? { over: f, out: g } : f );行之后，添加：

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

然后，您可以这样做：

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

我之前误解了OP的请求。他需要function#1和#3而不是#2来开火：

$("#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对其进行修改。

下面是使用$.data()方法的另一个尝试：

在插件中的cfg = $.extend(cfg, g ? { over: f, out: g } : 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);

Answer 2

我知道这是一个老问题，但它是在搜索中出现的，所以我在这里插入我的答案，以防其他人遇到它。

hoverIntent插件不是用来处理多个回调的，所以我给它打了一个补丁。它没有经过跨浏览器兼容性的全面测试，但既然一切都是通过jQuery的API完成的，那应该没问题。

Github link

Answer 3

在我看来，hoverIntent插件没有设置为支持多个事件处理程序。您可能必须修补hoverIntent代码才能使其正常工作。