gpt4 book ai didi

jquery - .hover(...) 等等。 ("hover"...) 行为不同

转载 作者:行者123 更新时间:2023-12-03 22:53:41 28 4
gpt4 key购买 nike

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

最佳答案

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

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

Example fiddle

或者,您可以拆分构成 hover() 方法的两个事件 - mouseentermouseleave:

$("#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>

关于jquery - .hover(...) 等等。 ("hover"...) 行为不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10789554/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com