Question

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

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

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

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

所以我希望在悬停时执行功能＃1和功能＃3。

是否可以使用hoverIntent？

如果没有，请你指点我另一个方向，这样我可以做到吗？

注意：我无权更改第一个文件。我只是想为悬停添加额外的功能。

谢谢。

Answer 1

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

hoverIntent插件并不是为了处理多个回调，所以我修补了一个版本。它没有经过跨浏览器兼容性的全面测试，但由于一切都是通过jQuery的API完成的，所以应该没问题。

Github link

Answer 2

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

Answer 3

一种方法是修改插件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的要求。他需要＃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);

如何为hoverIntent绑定多个事件处理程序？

3 个答案: