Question

使用JQuery当元素处于悬停状态时，我试图链接一些函数。

我通常会使用.hover事件函数，但在阅读了一些教程后，我读到使用.on更好，因为您可以使用一个事件处理程序来监视文档中的所有冒泡事件。

然而，当我将两个函数链接在一起时，我遇到了问题：

$("element").on( "hover", function() {         
    console.log("one");     
}, function() {         
    console.log("two");     
});

我希望结果是一两 （使用.hover时就是这种情况）而是我得两个

任何人都可以解释我做错了什么或这是否是预期的行为以及为什么？

使用.hover(...)转发：http://jsfiddle.net/gXSdG/

使用.on(hover...)转发：http://jsfiddle.net/gXSdG/1/

Answer 1

.on()只能使用1个函数，因此您必须询问传递的event以检查事件是什么。试试这个：

$("element").on("hover", function(e) {
    if (e.type == "mouseenter") {
        console.log("one");   
    }
    else { // mouseleave
        console.log("two");   
    }
});

Example fiddle

或者，您可以拆分构成hover()方法的两个事件 - mouseenter和mouseleave：

$("#element").on("mouseenter", function() {
  console.log("one");   
}).on('mouseleave', function() {
  console.log("two");   
});

#element {
  background-color: black;
  height: 100px;
  margin: 100px;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element"></div>

Answer 2

你刚刚对最初发生的事情感到困惑，你的两个例子都没有链接功能。 hover和on的API不同，请仔细阅读，以下是与您的问题相关的概述：

hover接受一个或两个参数，两个函数。第一个是鼠标进入时运行，第二个是鼠标离开时运行。

on只接受一次回调，你的第一个函数从未使用，因为它用于不同的参数，第二个用作回调并调用所有悬停事件，即鼠标输入和鼠标离开。

.hover（...）和on。（“悬停”...）表现不同

2 个答案: