javascript - jquery帮我分析一下发生了什么: mouseover/mouseout ok but not hover/unhover

Question

我一直在编写一些代码，在悬停/取消悬停时触发代码。然后我决定在 focus/blur 上触发相同的代码。通常仅使用 hover/unhover，我会采用通常的 hover comma no unhover 格式。但这一次，由于我尝试添加焦点/模糊，我必须使用绑定(bind)并在第二部分中使用 this.bind，如下所示:

$.fn.gogogo = function (msg) {
    $(this).bind("hover focus", function(){ 
        $("#screen").html(msg).show();
    });
    $(this).bind("unhover blur", function(){ 
        $("#screen").html("").hide();
    });
}

问题是，无论我做什么，hover/unhover都不起作用。我必须像这样恢复到 mouseover/mouseout 。除了 hover/unhover 与 mouseover/mouseout

一词之外，代码是相同的

$.fn.gogogo = function (msg) {
    $(this).bind("mouseover focus", function(){ 
        $("#screen").html(msg).show();
    });
    $(this).bind("mouseout blur", function(){ 
        $("#screen").html("").hide();
    });
}

我认为hover/unhover只是mouseover/mouseout的jquery抽象。为什么这里的行为不同:hover/unhover 破坏了我的代码，而 mouseover/mouseout 没问题？

谢谢。

Answer 1

没有名为 hover 的事件.

hover方法是将事件处理程序绑定(bind)到 mouseenter 的便捷方法和mouseleave事件。

如果您打开 jQuery 源代码，您将看到 hover方法定义如下:

hover: function(fnOver, fnOut) {
    return this.mouseenter(fnOver).mouseleave(fnOut);
},

<小时/>

您应该绑定(bind)到 mouseenter和mouseleave而是事件。

<小时/>

编辑: mouseenter 之间的区别和mouseover是mouseenter (和 mouseleave )不要冒泡。这意味着您将获得 mouseover如果鼠标移动到您绑定(bind)的元素内的任何元素(这可能不是您想要的)，则会发生事件，而您只会得到 mouseenter如果鼠标进入该元素本身，则发生事件。有关示例，请参阅 documentation .