5

使用 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/

4

2 回答 2

30

.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>

于 2012-05-28T19:30:27.960 回答
2

您只是对首先发生的事情感到困惑，您的两个示例中都没有函数链接。hover和的 APIon不同，请仔细阅读它们，这里是与您的问题相关的概述：

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

on只接受一个回调，并且永远不会使用您的第一个函数，因为它用于不同的参数，而第二个函数用作回调并为所有悬停事件调用，即鼠标进入和鼠标离开。

于 2012-05-28T19:34:02.517 回答