jQuery mouseover，mouseenter，mouseup，mousedown，mousemove，mouseleave

最新推荐文章于 2025-03-14 05:22:13 发布

cunchi4221

最新推荐文章于 2025-03-14 05:22:13 发布

阅读量1k

点赞数

文章标签： java python js jquery html ViewUI

原文链接：https://www.journaldev.com/4950/jquery-mouseover-mouseenter-mouseup-mousedown-mousemove-mouseleave

版权

本文深入讲解了jQuery中的鼠标事件，包括click、doubleclick、mousedown、mouseup、mouseenter、mouseleave、mouseover和mousemove等，提供了详细的语法说明及示例代码，帮助读者理解和运用这些事件进行动画和效果的开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Earlier we saw examples of jQuery click and jQuery double click events. They are categorised as jQuery mouse events. Today we will look into six more jQuery mouse events that you can use for various animations and effects.

前面我们看到了jQuery click和jQuery double click事件的示例。它们被归类为jQuery鼠标事件 。今天，我们将研究另外六个可用于各种动画和效果的jQuery鼠标事件。

jQuery mousedown():The mousedown() method fires when you press the mouse on any HTML element. This method will attach an event handler to the mouse down event. We can do any operations by using this event handler.
The syntax for using mousedown():
- mousedown()
In this, mousedown() method is used without an argument.
- mousedown(handler)
The handler could be any function which is executed each time the event is fired
jQuery mousedown（） ：当您在任何HTML元素上按下鼠标时，将触发mousedown（）方法。此方法会将事件处理程序附加到mouse down事件。通过使用此事件处理程序，我们可以执行任何操作。
使用mousedown（）的语法：
- mousedown（）
在这种情况下，使用mousedown（）方法时不带参数。
- mousedown（处理程序）
处理程序可以是每次触发事件时执行的任何函数
jQuery mouseup(): The mouseup() method fires when the mouse is released.This method will attach an event handler to the mouse up event. We can do any operations by using this event handler.
The syntax for using mouseup():
- mouseup()
In this, mouseup() method is used without an argument.
- mouseup(handler)
The handler could be any function which is executed each time the event is fired.
jQuery mouseup（） ：释放鼠标时将触发mouseup（）方法。该方法会将事件处理程序附加到mouseup事件上。通过使用此事件处理程序，我们可以执行任何操作。
使用mouseup（）的语法：
- mouseup（）
在这种情况下，使用mouseup（）方法时不带参数。
- mouseup（处理程序）
处理程序可以是每次触发事件时执行的任何函数。
jQuery mouseenter(): The mouseenter() method fires when the mouse enters an HTML element. This method will attach an event handler to the mouse enter event. We can do any operations by using this event handler.
The syntax for using mouseenter():
- mouseenter()
In this, mouseenter() method is used without an argument.
- mouseenter(handler)
The handler could be any function which is executed each time the event is fired
jQuery mouseenter（） ：当鼠标输入HTML元素时，mouseenter（）方法将触发。此方法会将事件处理程序附加到鼠标enter事件。通过使用此事件处理程序，我们可以执行任何操作。
使用mouseenter（）的语法：
- mouseenter（）
在这种情况下，使用mouseenter（）方法时不带参数。
- mouseenter（处理程序）
处理程序可以是每次触发事件时执行的任何函数
jQuery mouseleave(): The mouseleave() method fires when the mouse leaves the selected element. This method will attach an event handler to the mouse leave event.
The syntax for using mouseleave():
- mouseleave()
In this, mouseleave() method is used without an argument.
- mouseleave(handler)
The handler could be any function which is executed each time the event is fired
jQuery mouseleave（） ：当鼠标离开选定元素时，将触发mouseleave（）方法。此方法会将事件处理程序附加到鼠标离开事件。
使用mouseleave（）的语法：
- mouseleave（）
在这种情况下，使用mouseleave（）方法时不带参数。
- mouseleave（handler）
处理程序可以是每次触发事件时执行的任何函数
jQuery mouseover(): The mouseover() method fires when the mouse enters a selected HTML element. The main difference between the mouseover() and mouseenter() method is; mouseover() method is fired even if the mouse enters the child element of the selected element.
The syntax for using mouseover():
- mouseover()
In this, mouseover() method is used without an argument.
- mouseover(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（）方法。
- 鼠标悬停（处理程序）
处理程序可以是每次触发事件时执行的任何函数
jQuery mousemove(): The mousemove() method fires when the mouse is moved within the selected HTML element. This method will attach an event handler to the mouse move event.
The syntax for using mousemove():
- mousemove()
In this, mousemove() method is used without an argument.
- mousemove(handler)
The handler could be any function which is executed each time the event is fired
jQuery mousemove（） ：在选定HTML元素内移动鼠标时，将触发mousemove（）方法。此方法会将事件处理程序附加到鼠标移动事件。
使用mousemove（）的语法：
- mousemove（）
在这种情况下，使用mousemove（）方法时不带参数。
- mousemove（处理程序）
处理程序可以是每次触发事件时执行的任何函数

jQuery mouseup和mousedown示例 (jQuery mouseup and mousedown example)

Below is a simple example showing usage of jQuery mouse up and mouse down event methods.

下面是一个简单的示例，显示了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>

In this example, you can see that mousedown() method is triggered when you press on the <div> element and a text message “mouse Down” is displayed. When you release the mouse, mouseup() method is fired and a text message “mouse UP” is displayed.

在此示例中，您可以看到按下<div>元素时会触发mousedown（）方法，并显示文本消息“ mouse Down”。释放鼠标时，将触发mouseup（）方法，并显示一条文本消息“ mouse UP”。

The main difference between the click() method and these two methods is that click() method triggers only after the mouse is pressed and released. If you want to do anything in between these two actions, we can use mousedown() and mouseup().

click（）方法与这两个方法之间的主要区别在于，click（）方法仅在按下并释放鼠标后才触发。如果您想在这两个动作之间做任何事情，我们可以使用mousedown（）和mouseup（）。

Below is the output of above HTML page, try it yourself by clicking and holding for sometime before releasing the mouse.

以下是上述HTML页面的输出，请在释放鼠标之前单击并按住一段时间以尝试一下。

演示地址

jQuery mouseover，mouseenter，mouseleave和mousemove示例 (jQuery mouseover, mouseenter, mouseleave and mousemove example)

Below example shows the use of remaining mouse events.

下例显示了剩余鼠标事件的使用。

<!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> <b>Mouse Over:</b> You entered Green and Yellow region  <b><span>0</span></b> times.</p>
</div>

<div class="enter">
  <p> <b>Mouse Enter:</b> You entered Green region <b><span>0</span></b> times.</p>
</div>

<div class="leave">
  <p> <b>Mouse Leave:</b> You left the div element <b><span>0</span></b>  times.</p>
</div>

<div class="move">
  <p> <b>Mouse Move:</b> Moved <b><span>0</span></b> times within the div element.</p>
</div>

</body>
</html>

From the above example, you can easily learn the use and difference between these methods.

从上面的示例中，您可以轻松了解这些方法的用法和区别。

In this example, you can see that mouseover() method is triggered when you enter the green region, which is the parent <div> element and the yellow region the child <p> element. Unlike the mouseover() method, mouseenter() method fires when the mouse enters the green region. The mouseleave() method triggers when you leave the selected html element and mousemove() event triggers whenever the mouse is moved within the selected element.

在此示例中，您可以看到在输入绿色区域时将触发mouseover（）方法，绿色区域是父<div>元素，黄色区域是子<p>元素。与mouseover（）方法不同，mouseenter（）方法在鼠标进入绿色区域时触发。当您离开选定的html元素时，将触发mouseleave（）方法；每当鼠标在选定的元素内移动时，mousemove（）事件就会触发。

Below is the output of above HTML example, you can try it yourself.

以下是上述HTML示例的输出，您可以自己尝试。

演示地址

These are the main jQuery mouse event methods, there are few more that we will discuss in coming posts.

这些是jQuery鼠标事件的主要方法，我们将在以后的文章中讨论更多方法。