jQuery .hover(...) 和 on.("hover"...) 表现不同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10789554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
.hover(...) and on.("hover"...) behaving differently
提问by My Head Hurts
Using JQuery I am trying to chain a couple of functions when an element has a hover state.
使用 JQuery 我试图在元素具有悬停状态时链接几个函数。
I would normally use the .hoverevent function, but after reading some tutorials I read that using .onis better as you can use one event handler to monitor all bubbling events within a document.
我通常会使用.hover事件函数，但在阅读了一些教程后，我读到使用.on更好，因为您可以使用一个事件处理程序来监视文档中的所有冒泡事件。
However, I am having problems when I chain two functions together like so:
但是，当我像这样将两个函数链接在一起时，我遇到了问题：
$("element").on( "hover", function() {
console.log("one");
}, function() {
console.log("two");
});
I expected the result to be one two(which was the case when using .hover)but instead I get two two.
我预计结果是一二（使用时就是这种情况.hover），但我得到了两个二。
Can anyone explain what I am doing wrong or whether this is expected behaviour and why?
谁能解释我做错了什么或者这是否是预期的行为以及为什么？
Reproduced using .hover(...): http://jsfiddle.net/gXSdG/
转载使用.hover(...)：http: //jsfiddle.net/gXSdG/
Reproduced using .on(hover...): http://jsfiddle.net/gXSdG/1/
转载使用.on(hover...)：http: //jsfiddle.net/gXSdG/1/
回答by Rory McCrossan
.on()can only take 1 function, so you have to interrogate the passed eventto check what the event was. Try this:
.on()只能采用 1 个函数，因此您必须查询传递的函数event以检查事件是什么。尝试这个：
$("element").on("hover", function(e) {
if (e.type == "mouseenter") {
console.log("one");
}
else { // mouseleave
console.log("two");
}
});
Alternatively you can split the two events which constitute the hover()method - mouseenterand mouseleave:
或者，您可以拆分构成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>回答by Andrew Marshall
You've just confused about what was happening in the first place, there is no function chaining in either of your examples. The APIs for hoverand onare different, read them carefully, and here's an overview as it pertains to your problem:
您只是对首先发生的事情感到困惑，在您的两个示例中都没有函数链。对于这些APIhover和on是不同的，一定要读仔细，这里是因为它涉及到你的问题的概述：
hovertakes either one or two arguments, both functions. The first is run when the mouse enters, the second when the mouse leaves.
hover接受一个或两个参数，两个函数。第一个在鼠标进入时运行，第二个在鼠标离开时运行。
ontakes only one callback, and your first function is never used, since it's used for a different parameter, and the second one is used as the callback and called for all hover events, that is, mouse enter andmouse leave.
on只接受一个回调，你的第一个函数从未使用过，因为它用于不同的参数，第二个用作回调并调用所有悬停事件，即鼠标进入和鼠标离开。
