mouseover和mouseenter的区别

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不同之处,今天时间仓促,写的不够详细,如有不妥,可以加群交流,656992002,也可以直接联系我交流,联系方式见页面底部。

人已赞赏
IT百科小程序教程

百度小程序审核未通过,原因:小程序首页不得出现“返回”和“回首页”按钮

2021-5-20 19:29:02

jquerywordpress教程建站知识教程

点击空白区域关闭某个元素框

2021-10-20 11:19:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索