jQuery移入移出事件

最新推荐文章于 2024-04-07 10:29:49 发布

嘤嘤鸭

最新推荐文章于 2024-04-07 10:29:49 发布

阅读量353

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_43427995/article/details/105543531

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery中的移入移出事件，包括mouseover和mouseout的事件捕获问题，mouseenter和mouseleave避免事件捕获的特性，以及hover函数的使用方式。通过示例代码解析了在父子元素交互中的不同行为。

摘要由CSDN通过智能技术生成

jQuery移入移出事件

mouseover和mouseout

以下程序一个父div中有一个子div，移入父div打印“father移入”，移出父div打印“father移出”

<script>
    $(function()
    {
        //mouseover
        $(".father").on("mouseover",function()
        {
            console.log("father移入");
        })

        //mouseout
        $(".father").on("mouseout",function()
        {
            console.log("father移出");
        })
   }
   </script>
   <style>
    .father{
        width: 200px;
        height: 200px;
        background-color: brown;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color:cadetblue;
    }
    .father1{
        margin: 10px;
        width: 200px;
        height: 200px;
        background-color: brown;
    }
    .son1{
        width: 100px;
        height: 100px;
        background-color:cadetblue;
    }
</style>
	<body>
	    <div class="father">
	        <div class="son"></div>
	    </div>
	    <div class="father1">
	        <div class="son1"></div>
	    </div>
	</body>

注意！使用mouseover和mouseout时，只给父级添加这两个事件，移入子级会发生事件捕获，子级会先触发mouseout然后再触发mouseover,此时控制台会打印“father移出”和“father移入”

mouseenter和mouseleave

以下程序一个父div中有一个子div，移入父div打印“father移入”，移出父div打印“father移出”

<script>
    $(function()
    {
      //mouseenter
        $(".father1").on("mouseenter",function()
        {
            console.log("father移入1");
        })
        //mouseleave
        $(".father1").on("mouseleave",function()
        {
            console.log("father移出1");
        })
   }
   </script>
   <style>
    .father{
        width: 200px;
        height: 200px;
        background-color: brown;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color:cadetblue;
    }
    .father1{
        margin: 10px;
        width: 200px;
        height: 200px;
        background-color: brown;
    }
    .son1{
        width: 100px;
        height: 100px;
        background-color:cadetblue;
    }
</style>
	<body>
	    <div class="father">
	        <div class="son"></div>
	    </div>
	    <div class="father1">
	        <div class="son1"></div>
	    </div>
	</body>