jQuery中 mouseover、mouseout、mouseenter、mouseleave的区别
2014-08-27 21:50
405 查看
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件,与其相对应的是mouseout
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件,与其相对应的是mouseleave
一、以下这个例子能很好的帮助我们理解mouseover和mouseenter的区别:
1、 $("div.over").mouseover,当鼠标进入<div></div>标签时会计数加1,当鼠标进入<h2></h2>标签时依然继续计数。<h2>是<div>的子元素
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。
2、 $("div.over").mouseenter,当鼠标进入<div></div>标签时会计数加1,当鼠标进入<h2></h2>标签时就不会再继续计数了。<h2>是<div>的子元素
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
二、以下这个例子能很好帮助我们理解mouseout和mouseleave的区别:
1、 $("div.over").mouseout,当鼠标离开<div></div>标签时会计数加1,当鼠标离开<h2></h2>标签时依然继续计数。<h2>是<div>的子元素
不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。
如下图所示,鼠标沿着红色方向划过,经过三个蓝点位置会触发mouseout事件。
2、 $("div.over").mouseleave,当鼠标离开<div></div>标签时会计数加1,当鼠标离开<h2></h2>标签时就不会再继续计数了。<h2>是<div>的子元素
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
如下图所示,鼠标沿着红色方向划过,经过蓝点位置会触发mouseleave事件。
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件,与其相对应的是mouseleave
一、以下这个例子能很好的帮助我们理解mouseover和mouseenter的区别:
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> x=0; y=0; $(document).ready(function(){ $("div.over").mouseover(function(){ $(".over span").text(x+=1); }); $("div.enter").mouseenter(function(){ $(".enter span").text(y+=1); }); }); </script> </head> <body> <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left"> <h2 style="background-color:white;">被触发的 Mouseover 事件:<span></span></h2> </div> <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right"> <h2 style="background-color:white;">被触发的 Mouseenter 事件:<span></span></h2> </div> </body> </html>
1、 $("div.over").mouseover,当鼠标进入<div></div>标签时会计数加1,当鼠标进入<h2></h2>标签时依然继续计数。<h2>是<div>的子元素
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。
2、 $("div.over").mouseenter,当鼠标进入<div></div>标签时会计数加1,当鼠标进入<h2></h2>标签时就不会再继续计数了。<h2>是<div>的子元素
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
二、以下这个例子能很好帮助我们理解mouseout和mouseleave的区别:
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> x=0; y=0; $(document).ready(function(){ $("div.out").mouseout(function(){ $(".out span").text(x+=1); }); $("div.leave").mouseleave(function(){ $(".leave span").text(y+=1); }); }); </script> </head> <body> <div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left"> <h2 style="background-color:white;">被触发的 Mouseout 事件:<span></span></h2> </div> <div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right"> <h2 style="background-color:white;">被触发的 Mouseleave 事件:<span></span></h2> </div> </body> </html>
1、 $("div.over").mouseout,当鼠标离开<div></div>标签时会计数加1,当鼠标离开<h2></h2>标签时依然继续计数。<h2>是<div>的子元素
不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。
如下图所示,鼠标沿着红色方向划过,经过三个蓝点位置会触发mouseout事件。
2、 $("div.over").mouseleave,当鼠标离开<div></div>标签时会计数加1,当鼠标离开<h2></h2>标签时就不会再继续计数了。<h2>是<div>的子元素
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
如下图所示,鼠标沿着红色方向划过,经过蓝点位置会触发mouseleave事件。
相关文章推荐
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jquery 中的hover(),mouseleave()&mouseenter()和mouseover()&mouseout()的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jquery优化基本事件--mouseenter、mouseleave和mouseover、mouseout事件的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery之mouseover与mouseenter以及mouseout与mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jquery中mouseover和mouseout以及mouseenter和mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- mouseover与mouseenter与mousemove的区别mouseout与mouseleave的区别
- JQuery mouseover与mouseenter,mouseout与mouseleave的区别
- mouseover与mouseenter,mouseout与mouseleave的区别
- 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
- mouseover,mouseout,mouseenter,mouseleave的区别
- mouseout、mouseover和mouseleave、mouseenter的区别