jQuery帮助我分析发生了什么:mouseover/mouseout可以，但不能悬停/取消悬停 [英] Jquery help me analyze what happened: mouseover/mouseout ok but not hover/unhover

问题描述

我一直在处理一些代码，这些代码会触发hover/unhover上的代码.然后，我决定在focus/blur上也触发相同的代码.通常只使用hover/unhover，我会选择通常的hover comma no unhover格式.但是这一次，因为我尝试添加focus/blur，所以我不得不使用bind并在第二部分中也使用this.bind，就像这样:

I've been working on some code where I trigger the code on hover/unhover. Then I decided to trigger the same code also on focus/blur. Usually with hover/unhover only, I go for the usual hover comma no unhover format. But this time since I was trying to add focus/blur, I had to use bind and use this.bind with the second part too, like this:

$.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

The problem was that no matter what I did, hover/unhover didn't take. I had to revert back to mouseover/mouseout like this. The code is identical except for the words hover/unhover vs. mouseover/mouseout

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

我认为悬停/悬停只是mouseover/mouseout的jQuery抽象.这里的行为有何不同:hover/unhover破坏了我的代码，而mouseover/mouseout没问题?

I thought hover/unhover was just the jquery abstraction of mouseover/mouseout. How come the behavior is different here: hover/unhover breaks my code, while mouseover/mouseout is ok?

谢谢.

推荐答案

没有名为hover的事件.

hover方法是一种方便的方法，它将事件处理程序绑定到mouseenter和mouseleave事件.

The hover method is a convenience method that binds event handler to the mouseenter and mouseleave events.

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

If you open the jQuery source, you'll see that the hover method is defined like this:

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

---

您应该绑定到mouseenter和mouseleave事件.

---

You should bind to the mouseenter and mouseleave events instead.

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

EDIT: The difference between mouseenter and mouseover is that mouseenter (and mouseleave) don't bubble. This means that you'll get a mouseover event if the mouse moves into any element inside the one you bound to (which is probably not what you want), whereas you'll only get a mouseenter event if the mouse entered that element itself. For an example, see the documentation.

这篇关于jQuery帮助我分析发生了什么:mouseover/mouseout可以，但不能悬停/取消悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！