<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. "无法启动程序,因为计算机中丢失*.dll” 运行exe错误解决方法

    笔者把编译生成的win32 Release exe文件复制到另外一台电脑上,却发现程序不能运行,报错如下: 报错提示缺失动态链接库pcl_common_release.dll,那为什么在编译生成的电脑 ...

  2. [Webpack] Use the Webpack Dashboard to Monitor Webpack Operations

    Learn how to use the new Webpack Dashboard from Formidable Labs to display a pretty, useful output f ...

  3. android117 下拉列表

  4. Hadoop可视化与交互式工具:Zeppelin和Hue

    https://yq.aliyun.com/articles/42282?spm=5176.team18.teamshow1.19.9TkKmZ#rd

  5. [Effective C++ --020]宁以pass-by-reference-to-const替换pass-by-value

    前言: 我们都用过C的值传递方式,那么在C++情况下,值传递是怎样工作的呢? 比如: int foo(int x); int i; foo(i); 1.程序内部先取得i的一个副本 2.将副本传递到fo ...

  6. 信号之system函数

    在http://www.cnblogs.com/nufangrensheng/p/3512291.html中已经有了一个system函数的实现,但是该版本并不执行任何信号处理.POSIX.1要求sys ...

  7. Android(java)学习笔记133:ListViewProject案例(ListView + BaseAdapter + CheckBox)

    这个案例可能稍微复杂一点,我会讲述详细一点: 1.首先是AndroidManifest.xml: <?xml version="1.0" encoding="utf ...

  8. Linux操作系统的简单认识

    1:Linux操作系统的历史 Linux操作系统是由unix操作系统发展而来的,但是Unix是收费的系统,而Linux操作系统的免费的,开源的,所以使用比较广泛,但是它是基于命令行的,不提供图形化用户 ...

  9. Flash cs6 帧上的菱形原来是关键帧

    假如需要删除这个关键帧,选中它,然后右键,"清除关键帧",相应的类型即可. 因为之前学了一点点Flash,没见过帧上面这个菱形图标,才知道是关键帧.

  10. [记录] js判断数组key是否存在

    数组中判断key是否存在 可以通过arrayObject.hasOwnProperty(key)来进行判断数组key是否存在,返回的是boolean值,如果存在就返回true,不存在就返回false ...