<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. Nginx对某个文件夹或整个站点进行登录认证的方法

    比方要对 站点文件夹下的 test 文件夹 进行加密认证 首先须要在opt 的主文件夹中 /opt/ 创建一个新文件 htpasswd 此文件的书写格式是 username:password 每行一个 ...

  2. SWT的CheckBoxTreeView的上级菜单与下级菜单的选中的实现

    是不是很神奇? treeViewer.addCheckStateListener(new ICheckStateListener() { @Override public void checkStat ...

  3. JAVA 命令参数详解System.setProperty(

    JAVA 命令参数详解: 1.-D<name>=<value> set a system property  设置系统属性. java -D参数简化加入多个jar java命令 ...

  4. vim ctl+v批量添加/删除

    vim编辑器---批量注释与反注释 在使用vim编写代码的时候,经常需要用到批量注释与反注释一段代码.下面简要介绍其操作. 方法一 块选择模式 插入注释: 用v进入virtual模式 用上下键选中需要 ...

  5. Xamarin for android:为button设置click事件的几种方法

    原文:Xamarin for android:为button设置click事件的几种方法 在Xamarin中一个最基础的事情,就是为一个button指定click事件处理方法,可是即使是这么一件事也有 ...

  6. Android中目的地Intent的使用

    一.什么是Intent? Intent的中文意思是目的.在Android中也是“目的”的意思.就是我们要去哪里,从这个activity要前往另一个Activity就需要用到Intent. 示例代码一: ...

  7. windows phone (23) ScrollViewer元素

    原文:windows phone (23) ScrollViewer元素 ScrollViewer类表示可包含其他可见元素的可滚动区域,一般会用在屏幕的宽度和高度不够用时,作为一种延伸使用,参考书上称 ...

  8. 经典排序算法 - 高速排序Quick sort

    经典排序算法 - 高速排序Quick sort 原理,通过一趟扫描将要排序的数据切割成独立的两部分,当中一部分的全部数据都比另外一部分的全部数据都要小,然后再按此方法对这两部分数据分别进行高速排序,整 ...

  9. android学习七（创建自己定义控件）

    前面学习的是android的基本控件和布局的使用,可是主要的控件和布局有时候并不能实现复杂的布局.我们来看下各种控件和布局的关系. 可见全部的控件都是直接或者间接的继承自View的,全部的布局都是直接 ...

  10. java输入输出高速

    头文件: import java.io.*; 定义: BufferedReader in = new BufferedReader(new InputStreamReader(System.in)); ...