为什么 jQuery 事件处理程序的“.on(<event>, function())”样式不适用于 "hover"？

Question

这两个 .hover(function() {...}, function() {...}) 使用元素 ID 或 this 都有效：

$( "#imgPostTravel" ).hover(function() {
        $('#imgPostTravel').addClass('popout_image');
        $('#imgPostTravel').addClass('shadow');
    }, function() {
        $('#imgPostTravel').removeClass('popout_image');
        $('#imgPostTravel').removeClass('shadow');
});

$( "#imgPostTravel" ).hover(function() {
        $(this).addClass('popout_image');
        $(this).addClass('shadow');
    }, function() {
        $(this).removeClass('popout_image');
        $(this).removeClass('shadow');
});

...而使用 .on( "hover", function() {...}:

$( "#imgPostTravel" ).on( "hover", function() {
        $('#imgPostTravel').addClass('popout_image');
        $('#imgPostTravel').addClass('shadow');
    }, function() {
        $('#imgPostTravel').removeClass('popout_image');
        $('#imgPostTravel').removeClass('shadow');
});

...没有。

为什么不呢？

Answer 1

我猜你使用的是 on 方法，因为你是动态添加元素的。

尝试以下方法：

$(document).on( "mouseenter", "#imgPostTravel", function() {
    $('#imgPostTravel').addClass('popout_image');
    $('#imgPostTravel').addClass('shadow');
}, function() {
    $('#imgPostTravel').removeClass('popout_image');
    $('#imgPostTravel').removeClass('shadow');
});

其中 document 实际上应该是最接近 imgPostTravel 元素的非动态生成的父元素。

更新：

正如另一个答案中指出的那样，不应使用 hover，而应使用 mouseover 或 mouseenter（取决于所需的功能）。

Answer 2

那是因为 hover 不是事件名称。在 jQuery 1.9 之前，库支持使用此名称，如“附加说明 here:

中所述

Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

因为它不是一个标准的事件名称，而且曾经存在的“特殊情况支持”已经不存在了，所以它根本不起作用...

为什么 jQuery 事件处理程序的“.on(<event>, function())”样式不适用于 "hover"？

Why does the ".on(<event>, function())" style of jQuery event handler not work for "hover"?

jquery

event-handling