<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>

　　转自：http://blog.csdn.net/fanbin168/article/details/38316841?utm_source=tuicool

mouseover与mouseenter与mousemove的区别mouseout与mouseleave的区别的更多相关文章

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

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

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

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

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

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

  4. mouseout与mouseleave的区别

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

  5. mouseover与mouseenter与mousemove差额mouseout与mouseleave差额

    <1> HTML <html> <head> <title></title> </head> <body> < ...

  6. mouseover和mouseenter，mouseout和mouseleave的区别-引发的探索

    相信小伙伴们都用过鼠标事件,比如mouseover和mouseout,mouseenter和mouseleave.它们都分别表示鼠标移入移出. 在使用的过程中,其实一直有个小疑问——它们之间究竟有什么 ...

  7. mouseover与mouseenter，mouseout与mouseleave的区别

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

  8. mouseover，mouseenter，mouseout，mouseleave的区别

    mouseover :不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. mouseout :不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件. mous ...

  9. JQ中mouseover和mouseenter的区别

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

随机推荐

  1. hibernate 使用C3P0数据源

    1.导入jar包: hibernate-release-4.3.5.Final/lib/optional/*.jar 2.增加配置: <!-- 配置 C3P0 数据源 --> <pr ...

  2. 一个 Android 任务队列的实现

    最近在做Android项目时遇到这样一个问题:客户端向服务器请求数据,而在网络信号太差的情况下,数据迟迟不到,甚至丢失.服务器为了解决这个问题做了频繁的重发,android 客户端就会收到很多不想要的 ...

  3. Lazy Load 图片延迟加载(转)

    jQuery Lazy Load 图片延迟加载来源 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. ...

  4. android123 zhihuibeijing 新闻中心-新闻 页签 ViewPagerIndicator实现

    ## ViewPagerIndicator ## 使用导入ViewPagerIndicator库的方式相当于可以改源码,打包编译Eclips可以自动完成. ViewPager指针项目,在使用ViewP ...

  5. Linq的小知识(一)，大家可以学习一下

    linq的简介 lLINQ是Language Integrated Query的简称,它是集成在.NET编程语言中的一种特性.已成为编程语言的一个组成部分,在编写程序时可以得到很好的编译时语法检查,丰 ...

  6. Socket之UDP分包组包

    一般传输大的文件和信息的时候需要涉及到分包和组包,方法有很多,下面一种是借鉴了别人的思路,供大家参考哈 分包 1.取出需要传输的文件和字符的长度和大小放入缓存区里面: 2.设定固定传输的长度,用需要传 ...

  7. C#_delegate - 调用列表 计算阶乘

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Dele ...

  8. Apache rewrite 详解

    用rewrite可实现的部分:URL根目录搬迁,多目录查找资源,阻止盗连你的图片,拒绝某些主机访问,基于时间重写,据浏览器类型重写,动态镜像远程资源,外部重写程序模板,等等 详见下表: 目标 重写设置 ...

  9. codereview介绍

    1. 定义: Code review is systematic examination (often known as peer review) of computer source code. I ...

  10. PHP读书笔记（2）-变量与数据结构

    php中的数据类型: 一.8种主要数据类型 标量类型 1.整型(int|integer):八进制.十进制.十六进制.超过整型存储范围,会产生溢出. 整型数的字长和平台有关,尽管通常最大值是大约二十亿( ...