javascript - jQuery 的 mouseenter-mouseleave 与悬停事件之间的区别？

Question

以下代码片段之间有什么区别吗？

片段1：

$("textarea").mouseenter(function() {
    alert("Hello mouseenter!");
});

$("textarea").mouseleave(function() {
    alert("Hello mouseleave!");
});

片段 2：

$("textarea").hover(function() {
    alert("Hello mouseenter!");
}, function() {
    alert("Hello mouseleave!");
});

我在 Chrome 和 Firefox 中检查了上述代码片段，但两个片段的行为相同。但是，我想确定一下，mouseenter-mouseleave 和悬停事件之间有什么区别吗？

score 2 · Accepted Answer

jQuery 文档说：

调用 $( selector ).hover( handlerIn, handlerOut ) 是以下的简写：

1 $( 选择器 ).mouseenter( handlerIn ).mouseleave( handlerOut );

score 2 · Accepted Answer

使用悬停功能将触发事件两次，它将同时作用于鼠标移入和移出，例如

$("#xyz").hover(function (e) {
            alert("In hover function ");
});

这将触发两次警报，一次是当您将鼠标放在 xyz 元素上时，一次是当您将鼠标从 xyz 上移开时。这可能会在您的代码中引起一些麻烦，在 mouseienter mouseleave 事件中，您可以相应地计划事件

score 2 · Accepted Answer

它们之间没有区别...... hover() 方法在内部注册 mouseenter 和 mouseleave 处理程序......

悬停 - 代码

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

唯一的区别是如果你想使用事件委托，在那种情况下你不能使用.hover()

score 2 · Accepted Answer

悬停使用mouseenter和mouseleave。

不同的是mouseover和mouseout。enter/leave不是本地事件，它们是over/out事件的子集。

over/out如果您从父母转移到孩子身上，也会发生事件；你得到一个mouseout，mouseover当你搬回来时得到一个。这对悬停不利，因为您希望悬停应用于元素及其子元素。

score 1 · Accepted Answer

1

Hover 不会为孩子触发事件，而 mouseenter 和 mouseleave 会。

于 2013-10-25T09:21:13.433 回答

5 回答 5