使用 JQuery,当元素处于悬停状态时,我尝试链接几个函数。
我通常会使用.hover
事件函数,但在阅读了一些教程后我读到了使用.on
更好,因为您可以使用一个事件处理程序来监视文档中的所有冒泡事件。
但是,当我将两个函数链接在一起时遇到问题,如下所示:
$("element").on( "hover", function() {
console.log("one");
}, function() {
console.log("two");
});
我预计结果是one two (使用时就是这种情况.hover
)但我得到two two.
谁能解释我做错了什么或者这是否是预期的行为以及为什么?
转载使用.hover(...)
: http://jsfiddle.net/gXSdG/ http://jsfiddle.net/gXSdG/
转载使用.on(hover...)
: http://jsfiddle.net/gXSdG/1/ 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");
}
});
小提琴示例 http://jsfiddle.net/gXSdG/3/
或者,您可以将构成的两个事件分开hover()
方法 -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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)