jquery中 mouseout()与mouseleave()的区别

时间：2022-06-25 17:25:29 编辑：袖梨来源：一聚教程网

当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。
mouseout() 方法触发 mouseout 事件，或规定当发生 mouseout 事件时运行的函数。
mouseout() 事件,不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
而 mouseleave 事件，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
请看下面例子的演示我们就很清楚的理解了这二个事件的区别。

例子

$("li").each(function(i) {
            //删除的鼠标划过的显示与隐藏
            $(this).mouseover(function() {
                $(this).find(".del").fadeIn(10);
            })
            $(this).mouseleave(function() {
                $(this).find(".del").fadeOut(10);
            })
        })

上面的代码中如果不是用的mouseleave而是mouseout的话你会发现尚未离开类名的.del这个DIV这个DIV有时候就会闪动。那是因为你可能离开了该DIV的子元素，所以会出发mouseout事件。具体mouseleave和mouseout两者之间的区别主要有以下两点：

1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

例子

蚂蚁部落

上面的代码测试可能不够便利，不过也可以测试出，当鼠标指针从匹配元素或者匹配元素的子元素移出来的时候都可以触发mouseout事件，但是只有鼠标指针从匹配元素移出时才能触发mouseleave事件。

推荐专题

最新下载

热门教程

jquery中 mouseout()与mouseleave()的区别

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程