.hover(...)和on.("悬停"...)表现不同

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");   
    }
});

示例小提琴

或者,您可以拆分构成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>