当元素处于悬停状态时，我尝试使用 JQuery 链接几个函数.

Using JQuery I am trying to chain a couple of functions when an element has a hover state.

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

I would normally use the .hover event function, but after reading some tutorials I read that using .on is better as you can use one event handler to monitor all bubbling events within a document.

但是，当我像这样将两个函数链接在一起时，我遇到了问题:

However, I am having problems when I chain two functions together like so:

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

我希望结果是 一二 (使用 .hover 时就是这种情况) 但我得到的是 二两个.

I expected the result to be one two (which was the case when using .hover) but instead I get two two.

谁能解释我做错了什么或者这是否是预期的行为以及为什么?

Can anyone explain what I am doing wrong or whether this is expected behaviour and why?

使用 .hover(...) 复制:http://jsfiddle.net/gXSdG/

使用 .on(hover...) 复制:http://jsfiddle.net/gXSdG/1/

推荐答案

.on() 只能带 1 个函数，所以要查询传递的 event 到检查事件是什么.试试这个:

.on() can only take 1 function, so you have to interrogate the passed event to check what the event was. Try this:

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

小提琴示例

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

Alternatively you can split the two events which constitute the hover() method - mouseenter and 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>