<1>

HTML

<html>

<head>

    <title></title>

</head>

<body>

    <p> 当鼠标进入div1的时候会触发mouseover事件，由于btn1和btn2是包裹在div1下的子元素，所以当鼠标从div1进入到子元素btn1的时候又会触发mouseover事件 ,当鼠标从btn1进入到btn2的时候又会再次触发mouseover事件。当鼠标离开btn2元素本身 进入到div1的时候，又会触发mouseover</p>

    <div style=" border:10px solid red" id="div1">

        <input type="button" value="0" id="btn1" />

        <input type="button" value="btn2" id="btn2" style=" margin-left:40px" />

    </div>

    <p>  当鼠标进入到div2的时候就会触发mousemove事件。进入div2后【仅仅要移动一个像素点】都会触发mousemove事件 [请慎重使用，耗资源]</p>

    <div style=" border:10px solid red" id="div2">

        <input type="button" value="0" id="btn3" />

        <input type="button" value="btn4" id="btn4" style=" margin-left:40px" />

    </div>

    <p>仅仅有当鼠标进入【被选中】控件div3的时候才会触发mouseenter事件。当鼠标进入【被选中】控件的【子元素】的时候而没有离开被选中控件本身的时候【不会再次】触发</p>

    <div style=" border:10px solid red" id="div3">

        <input type="button" value="0" id="btn5" />

        <input type="button" value="btn6" id="btn6" style=" margin-left:40px" />

    </div>

    <p>当鼠标离开的div4的时候就会触发mouseout事件，当鼠标进入div4的子控件btn7后。离开btn7就会再次触发mouseout事件，当鼠标从btn7进入btn8,后。离开btn8的时候也会再次触发mouseout事件。

</p>

    <div style=" border:10px solid red" id="div4">

        <input type="button" value="0" id="btn7" />

        <input type="button" value="btn8" id="btn8" style=" margin-left:40px" />

    </div>

    <p>仅仅有当鼠标离开【被选中】控件的时候才会触发mouseleave事件；当鼠标离开【被选中】的【子元素】而【没有离开被选中的控件】的时候【不会再次】触发</p>

    <div style=" border:10px solid red" id="div5">

        <input type="button" value="0" id="btn9" />

        <input type="button" value="btn10" id="btn10" style=" margin-left:40px" />

    </div>

</body>

</html>

<script src="script/jquery-1.11.0.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    //<!--不论鼠标指针进入被选元素或其子元素，都会触发 mouseover 事件-->

        $(function () {                                                    //-------mouseover 鼠标进入

            $("#div1").mouseover(function () {

                $("#btn1").val(parseInt($("#btn1").val()) + 1)

            })

            //当鼠标进入div1的时候会触发mouseover事件，由于btn1和btn2是包裹在div1下的子元素。所以当鼠标从div1进入到子元素 btn1的时候又会触发mouseover事件 ,当鼠标从btn1进入到btn2的时候又会再次触发mouseover事件，当鼠标离开btn2元素本身 进入到div1的时候，又会触发mouseover

        })

        //---------------------------------------------------------------------------------------------------------

        $(function () {                                                    //-------mousemove 鼠标进入

            $("#div2").mousemove(function () {

                $("#btn3").val(parseInt($("#btn3").val()) + 1)

            })

            //<!--当鼠标进入到div2的时候就会触发mousemove事件。进入div2后【仅仅要移动一个像素点】都会触发mousemove事件 [请慎重使用。耗资源]-->

        });

        //---------------------------------------------------------------------------------------------------------

        $(function () {                                                    //-------mouseenter 鼠标进入

            $("#div3").mouseenter(function () {

                $("#btn5").val(parseInt($("#btn5").val()) + 1)

            })

            //<!--仅仅有当鼠标进入【被选中】控件div3的时候才会触发mouseenter事件，当鼠标进入【被选中】控件的【子元素】的时候而没有离开被选中控件本身的时候【不会再次】触发-->

        });

        //********************************************************************************************************

        //<!--不论鼠标指针离开被选元素还是不论什么子元素，都会触发 mouseout 事件-->

        $(function () {                                                    //-------mouseout 鼠标离开

            $("#div4").mouseout(function () {

                $("#btn7").val(parseInt($("#btn7").val()) + 1)

            })

            //当鼠标离开的div4的时候就会触发mouseout事件，当鼠标进入div4的子控件btn7后。离开btn7就会再次触发mouseout事件。当鼠标从btn7进入btn8,后。离开btn8的时候也会再次触发mouseout事件。

        });

        //---------------------------------------------------------------------------------------------------------

        $(function () {                                                    //-------mouseleave 鼠标离开

            $("#div5").mouseleave(function () {

               $("#btn9").val(parseInt($("#btn9").val()) + 1)

            })

            //<!--仅仅有当鼠标离开【被选中】控件的时候才会触发mouseleave事件；当鼠标离开【被选中】的【子元素】而【没有离开被选中的控件】的时候【不会再次】触发-->

        });

        //==========================================================================================================

    </script>

版权声明：本文博主原创文章。博客，未经同意不得转载。

mouseover与mouseenter与mousemove差额mouseout与mouseleave差额的更多相关文章

  1. mouseover与mouseenter与mousemove的区别mouseout与mouseleave的区别

    <html> <head> <title></title> </head> <body> <p> 当鼠标进入div1 ...

  2. mouseout与mouseleave的区别

    1 mouseout:当鼠标指针从元素上移开时,发生 mouseout 事件.该事件大多数时候会与 mouseover 事件一起使用. 2 mouseout与 mouseleave 事件不同,不论鼠标 ...

  3. jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

  4. mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout ...

  5. 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

  6. JQ中mouseover和mouseenter的区别

    我最近也在学习JQuery,所以最近对JQ中的一些小问题进行总结,方便学习. 在对于刚开始学习JQ的初学者来说,mouseover事件和mouseenter事件总是傻傻分不清楚,毕竟刚开始学习的时候, ...

  7. 区别mouseover与mouseenter?

    区别mouseover与mouseenter? * mouseover: 在移入子元素时也会触发, 对应mouseout,进入子元素的时候,父元素显示离开状态 * mouseenter: 只在移入当前 ...

  8. jquery中mouseover和mouseenter的区别

    jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...

  9. mouseover与mouseenter区别

    学习笔记. mouseover:在鼠标移入元素本身或者子元素时都会触发事件,相当于有一个冒泡过程.而且在鼠标移入子元素中时,父元素会显示离开的状态:相应的,当鼠标从子元素移入父元素,子元素也会显示离开 ...

随机推荐

  1. 关于margin-right的应用问题

    今天在群里面,有人抛出了一个关于css中margin-right没有效果的问题.CSS代码和HTML代码例如以下: .style1{ width:400px; height:440px; backgr ...

  2. HDU 3315 My Brute(费用流）

    职务地址:HDU 3315 这个题的思路全然是自己想出来的,自我感觉挺巧妙的. . .(大牛勿喷.. . )对大胆建图又多了一份信心. 详细思路是构造一个二分图,Si连源点.Xi连汇点,流量都是1,费 ...

  3. Apache的Mesos和Google的Kubernetes 有什么区别？

    Apache的Mesos和Google的Kubernetes 有什么区别?本文来自StackOverFlow上的一个问题,主要讨论Mesos和Kubernetes的区别,相信我们很多人也有同意的疑问. ...

  4. WPF实现无窗体鼠标跟随

    原文:WPF实现无窗体鼠标跟随 上次的弹力模拟动画实现后,我觉得可以把这个弄得更好玩一些,我们可以让小球实时跟随着鼠标,并且还可以让窗口完全消失,让小球在桌面上飞来飞去. 这只需要一些简单的修改就可以 ...

  5. 全面认识Eclipse中JVM内存设置(转)

    这里向大家描述一下Eclipse中如何进行JVM内存设置,JVM主要管理两种类型的内存:堆和非堆.简单来说堆就是Java代码可及的内存,是留给开发人员使用的:非堆就是JVM留给自己用的,所以方法区.J ...

  6. 上门洗车APP --- Androidclient开发 之 项目结构介绍

    上门洗车APP --- Androidclient开发 之 项目结构介绍 前言 尽管公司项目较紧,但还是抽空给大家继续更新. o_O"~ 欢迎大家的关注,非常高兴和大家共同学习.前面给大家分 ...

  7. .NET 使用 MySql.Data.dll 动态库操作MySql的帮助类--MySqlHelper

    .NET 使用 MySql.Data.dll 动态库操作MySql的帮助类--MySqlHelper 參考演示样例代码,例如以下所看到的: /// <summary> /// MySql ...

  8. UINavigationController的横屏问题

    近期用代码创建了一个UINavigationController,并且当前的屏幕设置为横屏的,此时遇到的问题是UINavigationController的view的大小为宽768 高1024,也就是 ...

  9. CodeForces 52C Circular RMQ（间隔周期段树，间隔更新，间隔总和）

    转载请注明出处:http://blog.csdn.net/u012860063 题目链接:http://codeforces.com/problemset/problem/52/C You are g ...

  10. 编写高效的JavaScript

    Web前端性能优化——编写高效的JavaScript   前言 随着计算机的发展,Web富应用时代的到来,Web 2.0早已不再是用div+css高质量还原设计的时代.自Gmail网页版邮件服务的问世 ...