jQuery mouseover，mouseenter，mouseup，mousedown，mousemove，mouseleave
时间：2020-02-23 14:46:11 来源:igfitidea点击:
前面我们看到了jQuery click和jQuery double click事件的示例。
它们被归类为jQuery鼠标事件。
今天，我们将研究另外六个可用于各种动画和效果的jQuery鼠标事件。
- jQuery mousedown()：当您在任何HTML元素上按下鼠标时，将触发mousedown()方法。
此方法会将事件处理程序附加到mouse down事件。
我们可以使用此事件处理程序进行任何操作。
mousedown()：mousedown()的语法
在这种情况下，使用mousedown()方法时不带参数。
- mousedown(处理程序)
The handler could be any function which is executed each time the event is fired- jQuery mouseup()：释放鼠标时将触发mouseup()方法。
该方法会将事件处理程序附加到mouseup事件上。
我们可以使用此事件处理程序执行任何操作。
mouseup()：mouseup()的语法
在这种情况下，使用mouseup()方法时不带参数。
- mouseup(处理程序)
The handler could be any function which is executed each time the event is fired.- jQuery mouseenter()：当鼠标输入HTML元素时，mouseenter()方法将触发。
此方法会将事件处理程序附加到鼠标enter事件。
我们可以使用此事件处理程序执行任何操作。
mouseenter()：mouseenter()的语法
在这种情况下，使用mouseenter()方法时不带参数。
- mouseenter(处理程序)
The handler could be any function which is executed each time the event is fired- jQuery mouseleave()：当鼠标离开选定元素时，将触发mouseleave()方法。
此方法会将事件处理程序附加到鼠标离开事件。
使用mouseleave()：mouseleave()的语法
在这种情况下，使用mouseleave()方法时不带参数。
- mouseleave(handler)
The handler could be any function which is executed each time the event is fired- jQuery mouseover()：当鼠标输入选定HTML元素时，将触发mouseover()方法。
mouseover()和mouseenter()方法之间的主要区别是；即使鼠标进入所选元素的子元素，也会触发mouseover()方法。
使用mouseover()的语法：mouseover()
在这种情况下，使用mouseover()方法时不带参数。
- 鼠标悬停(处理程序)
The handler could be any function which is executed each time the event is fired- jQuery mousemove()：当鼠标在选定HTML元素内移动时，将触发mousemove()方法。
此方法将事件处理程序附加到mouse move事件。
使用mousemove()：mousemove()的语法
在这种情况下，使用mousemove()方法时不带参数。
- mousemove(处理程序)
The handler could be any function which is executed each time the event is fired
jQuery mouseup和mousedown示例
下面是一个简单的示例，显示了jQuery鼠标向上和鼠标向下事件方法的用法。
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mouse Up and Mouse Down</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
$("div").mouseup(function(){
$( this ).text("mouse UP");
});
$("div").mousedown(function(){
$( this ).text("mouse DOWN");
});
});
</script>
<style>
.divClass1
{
padding:5px;
text-align:center;
background-color:yellow;
border:solid 1px;
}
</style>
</head>
<body>
<div class="divClass1">Click and Hold here for DEMO, release after sometime</div>
</body>
</html>
在此示例中，您可以看到按下<div>元素时会触发mousedown()方法，并显示文本消息" mouse Down"。
释放鼠标时，将触发mouseup()方法，并显示一条文本消息" mouse UP"。
click()方法与这两种方法之间的主要区别在于，click()方法仅在按下并释放鼠标后才触发。
如果您想在这两个动作之间做任何事情，我们可以使用mousedown()和mouseup()。
以下是上述HTML页面的输出，请在释放鼠标之前单击并按住一段时间以尝试一下。
jQuery mouseover，mouseenter，mouseleave和mousemove示例
下例显示了剩余鼠标事件的使用。
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mouse over, enter, leave and move example</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
div {
padding:5px;
text-align:center;
background-color:green;
border:solid 2px green;
margin: 25px;
}
p {
background-color: yellow;
}
</style>
<script>
var i=0;
var j=0;
var m=0;
var n=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(++i);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(++j);
});
$("div.leave").mouseleave(function(){
$(".leave span").text(++m);
});
$("div.move").mousemove(function(){
$(".move span").text(++n);
});
});
</script>
</head>
<body>
<div class="over">
<p> Mouse Over: You entered Green and Yellow region 0 times.</p>
</div>
<div class="enter">
<p> Mouse Enter: You entered Green region 0 times.</p>
</div>
<div class="leave">
<p> Mouse Leave: You left the div element 0 times.</p>
</div>
<div class="move">
<p> Mouse Move: Moved 0 times within the div element.</p>
</div>
</body>
</html>
从上面的示例中，您可以轻松了解这些方法的用法和区别。
在此示例中，您可以看到，输入绿色区域(即父<div>元素和黄色区域作为子<p>元素)时，将触发mouseover()方法。
与mouseover()方法不同，mouseenter()方法在鼠标进入绿色区域时触发。
mouseleave()方法在您离开选定HTML元素时触发，并且mousemove()事件在将鼠标移到选定元素内时触发。
