mouseover和mouseout绑定某个'外层元素aaa',如果这个元素有子元素,则不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件;而只有在鼠标指针从'外层元素aaa'外穿入被选元素时,才会触发 mouseenter 事件。
测试代码如下:
<section class="moude1 container bd1"><div class="moude1a bd2">鸿硕科技网站建设小程序开发</div><ul class="bd3"><li>网站建设</li><li>小程序开发</li><li>在线教育系统</li></ul></section><!-- 下面这串js当鼠标进入ul中或者进入'.moude1a'中时,均会触发'.moude1'绑定的事件 --><script>$(document).ready(function() {$('.moude1').mouseover(function() {$(this).find('ul').slideDown(300);});$('.moude1').mouseout(function() {$(this).find('ul').slideUp();});})</script><!-- 下面这串js当鼠标进入ul中或者进入'.moude1a'中时,均不会触发'.moude1'绑定的事件;而只有鼠标离开'.moude1'这个外层大元素的时候才会触发'.moude1'绑定的事件。 --><script>/* $(document).ready(function() {$('.moude1').mouseenter(function() {$(this).find('ul').slideDown(300);});$('.moude1').mouseleave(function() {$(this).find('ul').slideUp();});}) */</script>
从上面的例子可以看到,当绑定着两个事件(mouseover和mouseenter)的元素里面没有子元素的时候,这两个事件的触发效果是一致的。
当绑定事件的元素里面有子元素的时候,鼠标经过绑定mouseover的当前元素以及它里面的子元素的时候,都会触发,而经过绑定mouseenter的元素时,只会在鼠标刚进入的时候触发,当进入其子元素的时候,是不会再触发的了。
当绑定事件的元素里面有子元素的时候,鼠标经过绑定mouseover的当前元素以及它里面的子元素的时候,都会触发,而经过绑定mouseenter的元素时,只会在鼠标刚进入的时候触发,当进入其子元素的时候,是不会再触发的了。
大概的代码如上,可以区别出mouseover和mouseenter不同之处,今天时间仓促,写的不够详细,如有不妥,可以加群交流,656992002,也可以直接联系我交流,联系方式见页面底部。