jQuery鼠标移动事件

57 阅读 0 评论 38 点赞

我是靠谱客的博主醉熏银耳汤，最近开发中收集的这篇文章主要介绍jQuery鼠标移动事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

概念

个人理解：

jQuery鼠标移动事件是最常用的鼠标事件之一，当用户使用鼠标在指定的元素上移动时即与该元素产生交互，就会触发鼠标移动事件，比如：鼠标在指定元素上移入、移出、悬停等等操作，都属于鼠标移动事件的范围。

mouseenter()&mouseleave() 事件函数

说明：

当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。mouseenter() 方法触发 mouseenter 事件，或添加当发生 mouseenter 事件时运行的函数。
当鼠标指针离开被选元素时，会发生 mouseleave 事件。mouseleave() 方法触发 mouseleave 事件，或添加当发生 mouseleave 事件时运行的函数。

通常mouseenter事件与mouseleave事件一起搭配使用。

语法：

触发被选元素的 mouseenter与mouseleave 事件：

$(selector).mouseenter()
$(selector).mouseleave()

添加函数到 mouseenter与mouseleave 事件：

$(selector).mouseenter(function)
$(selector).mouseleave(function)

解释：

mouseenter()与mouseleave()事件函数的参数是回调函数，可选项，当mouseenter事件与mouseleave事件被触发时，该回调函数就会执行。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="jquery.min.js"></script>
        <script>
            $(document).ready(function(){
              $("p").mouseenter(function(){
                $("p").css("background-color","yellow");
              });
              $("p").mouseleave(function(){
                $("p").css("background-color","lightgray");
              });
            });
        </script>
    </head>
    
    <body>
    	<p>鼠标移动到该段落。</p>
    </body>
</html>

mouseover()&mouseout() 事件函数

说明：

当鼠标指针位于元素上方时，会发生 mouseover 事件。mouseover() 方法触发 mouseover 事件，或添加当发生 mouseover 事件时运行的函数。
当鼠标指针离开被选元素时，会发生 mouseout 事件。mouseout() 方法触发 mouseout 事件，或添加当发生 mouseout 事件时运行的函数。

通常mouseover事件与mouseout事件会一起搭配使用。

语法：

触发被选元素的 mouseover 与mouseout事件：

$(selector).mouseover()
$(selector).mouseout()

添加函数到 mouseover与mouseout 事件：

$(selector).mouseover(function)
$(selector).mouseout(function)

解释：

mouseover()与mouseout()事件函数的参数是回调函数，可选项，当mouseover事件与mouseout事件触发时，该回调函数执行。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <script src="jquery.min.js"></script>
        <script>
            $(document).ready(function(){
              $("p").mouseover(function(){
                $("p").css("background-color","yellow");
              });
              $("p").mouseout(function(){
                $("p").css("background-color","lightgray");
              });
            });
        </script>
    </head>
    
    <body>
    	<p>鼠标移动到这个段落上。</p>
    </body>
</html>

鼠标移入与移出事件对比

mouseenter与mouseover事件的区别：

mouseover 事件在鼠标移动到选取的元素及其子元素上时触发。
mouseenter 事件只在鼠标移动到选取的元素上时触发。

mouseleave与mouseout事件的区别：

mouseout 事件在鼠标离开任意一个子元素及选的元素时触发。
mouseleave 事件只在鼠标离开选取的的元素时触发。

详细解释可以查看jQuery事件冒泡相关词条。

mousemove() 事件函数

说明：

当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。mousemove() 方法触发 mousemove 事件，或添加当发生 mousemove 事件时运行的函数。
用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。

语法：

触发被选元素的 mousemove 事件：

$(selector).mousemove()

添加函数到 mousemove 事件：

$(selector).mousemove(function)

解释：

mousemove()函数的参数是回调函数，可选项，当mousemove事件触发时，该函数就会被执行。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <script src="jquery.min.js"></script>
        <script>
            $(document).ready(function(){
              $(document).mousemove(function(event){
                $("span").text(event.pageX + ", " + event.pageY);
              });
            });
        </script>
    </head>
    <body>
    	<p>鼠标指针的坐标是: <span></span>.</p>
    </body>
</html>