jQuery on('hover') 事件替换

Posted 2023-05-09

【中文标题】jQuery on(\'hover\') 事件替换

【英文标题】：jQuery on('hover') Event ReplacementjQuery on('hover') 事件替换

【发布时间】：2013-06-22 11:48:57

【问题描述】：

我希望在悬停时交换一个 img src。通常我会使用：

$('#img').hover(function() 
    $(this).attr('src', 'http://www.example.com/new-img.jpg');
);

但是，我通过 Ajax 加载内容，所以通常我会使用：

$('#main').on('hover', '#img', function() 
    $('#img').attr('src', 'http://www.example.com/new-img.jpg');
);

但我读到 on('hover', ...) 在 jQuery 1.8 中已弃用并在 1.9 (jQuery Docs) 中删除，这是我目前使用的。除了使用：

$('#main').on('mouseenter', '#img', function() 
   $('#img').attr('src', 'http://www.example.com/new-img.jpg');
);

$('#main').on('mouseleave', '#img', function() 
   $('#img').attr('src', 'http://www.example.com/old-img.jpg');
);

【问题讨论】：

使用mouseenter和mouseleave有什么问题？

没问题，我只是想看看是否有人有更短/更简单的解决方法。

【参考方案1】：

不，您需要分两次调用。但是对于添加的 jQuery 点，您可以将它们链接起来：

$('#main').on('mouseenter', '#img', function() 
   $('#img').attr('src', 'http://www.example.com/new-img.jpg');
).on('mouseleave', '#img', function() 
   $('#img').attr('src', 'http://www.example.com/old-img.jpg');
);

正如下面的 Benjamin cmets 一样，您可以进一步优化（这次您将获得普通的旧 javascript 点）：

$('#main').on('mouseenter', '#img', function() 
   this.src = 'http://www.example.com/new-img.jpg';
).on('mouseleave', '#img', function() 
   this.src = 'http://www.example.com/old-img.jpg';
);

【讨论】：

在这种情况下，将多个事件传递给一个 .on() 调用就没有那么有意义了。正如Shaddow的回答一样。

@kmfk 但是这种方式不支持事件委托。 “我正在通过 Ajax 加载内容”

将无法使用@Shaddow，因为内容是通过 ajax 加载的......看起来我会这样做。

@BenjaminGruenbaum 确实是this.src。谢谢：已添加。

是的，我的旧解决方案不支持事件延迟

【参考方案2】：

您可以应用多个事件，然后像这样检查event.type：

$('#main').on('mouseenter mouseleave', '#img', function(e) 
    $(this).attr('src', 'http://www.example.com/' + (e.type == 'moseenter' ? 'new-img.jpg' : 'old-img.jpg'));
);

jsFiddle

您也可以使用switch-case 或if/else：

$('#main').on('mouseenter mouseleave', '#img', function(e) 
    switch(e.type) 
        case 'mouseenter':
            $(this).attr('src', 'http://www.example.com/new-img.jpg');
            break;
        case 'mouseleave':
            $(this).attr('src', 'http://www.example.com/old-img.jpg');
            break;
    

【讨论】：

迄今为止最好的答案

【参考方案3】：

这是一种完全不涉及 JavaScript 的替代方法：

不要使用带有src 属性的<img>，而是使用一个div，给那个div 赋予相同的id（记得给它正确的宽度和高度）。

在你的 CSS 中，给 div 一个 background-image 类似的东西：

#img 
    background-image: url('http://www.example.com/old-img.jpg');

打开:hover 更改它

#img:hover 
    background-image: url('http://www.example.com/new-img.jpg');

(fiddle)

【讨论】：

好吧，如果我想使用 CSS，我可能会创建一个精灵并更改 background-position 以获得更快的加载时间；）...但这更多是出于好奇。

@pennstate_fanboy 啊，好吧，我以为你不知道这项技术。顺便说一句，如果您只是更改图像源，这比 jQuery 选项更可取。尤其是委托。

没错，就像我说的，更多的是出于好奇。我还有一些其他事件在同一个 hover 上触发，所以我想我只需将 img src 更改放入其中。

@pennstate_fanboy 我完全同意你的看法，这不是灵丹妙药。 CSS 伪选择器仅用于表示行为。如果您有实际的业务逻辑必须在悬停时发生，他们可能不会这样做。在这些演示案例中，它们更快，也更容易 imo。