mouseover和mouseout、mouseenter和mouseleave

又一个傻傻分不清楚的东东~

现实真是一个问题天天有的世界~本以为我对js中的事件还是比较了解的，对于早就接触的mouse事件，更是觉得得心应手了~但是现实却给了我一记重拳！

我自身工作中遇到的犯二的故事就不说了。。。实在太。。。所以就进入主题！

简单的记录一下mouse事件中比较容易搞混的：

mouseover和mouseout他们是一对，而mouseenter和mouseleave是另外一对！

对于大牛们来说，我这么分组应该一目了然了，然而对于新手可能可以往下看看。

mouseover和mouseout被我定义为是一对的原因是：鼠标进出绑定元素和其子元素都会触发事件。

而mouseenter和mouseleave被我定义为是一对的原因是：鼠标进出绑定元素会触发事件，而进出其子元素不会被触发事件。

总结：多读书多看报少吃零食多睡觉

时间： 2024-11-06 07:33:33

mouseover和mouseout、mouseenter和mouseleave的相关文章

mouseover、mouseout和mouseenter、mouseleave

这里直接把<Javascript 高级程序设计(第三版)>中的解释贴出来: mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发.不能通过键盘触发这个事件. mouseout:在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发.又移入的另一个元素可能位于前一个元素的外部,也可能是这个元素的子元素.不能通过键盘触发这个事件. mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发.这个事件不冒泡,而且在光标移动到后代元素上时不会触

JavaScript里mouseenter和mouseleave与mouseover和mouseout的区别

今天总结下mouseenter.mouseleave.mouseover.mouseout的区别,之前一直懵着用没仔细研究他们的区别,结果终于踢到铁板了. 上代码: <style> div { margin: 0 auto; } .box { box-sizing: border-box; padding: 30px 0; width: 300px; border: 1px solid #005AA0; } .sonBox { width: 150px; height: 150px; back

Jquery hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别

定义和用法 hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数. jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件. jQuery 1.8 版本后该方法触发 mouseover和 mouseout事件. 语法 $(selector).hover(inFunction,outFunction)//inFunction 必需,规定 mouseover 事件发生时运行的函数:outFunction 可选,规定 mouseout 事件发生时运

mouseover、mouseout，mouseenter、mouseleave区别

心情压抑的一天,我想好好的. mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout与mouseleave 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件. 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件. mouseover.mouseout事件冒泡

mouseenter(fn)和mouseleave、mouseover和mouseout的的区别

$('.box1').mouseenter(function(){//穿入事件mouseenter $(this).css('background','red'); }).mouseleave(function(){ $(this).css('background','green'); }) 再看看看一张效果图片: 这貌似和移入.移出事件区别.如果在.box1添加一个层,会怎么样了??? <div class="box1"> <p></p> <

mouseover ,mouseout ,mouseenter,mouseleave的区别

昨天写了个mouseover.mouseout 事件,发现频频闪动,研究半天,最后得出结论 mouseover/mouseout:鼠标经过该元素触发,经过其子元素再次触发 mouseenter/mouseleave:只触发一次,不论该元素有多少子元素 所以,使用该类型事件时,换成mouseenter/mouseleave

mouseout和mouseover、mouseenter和mouseleave

      在前端开发中经常会碰到当鼠标放到一个元素上时会弹出你一个元素,鼠标离开那个弹出元素后隐藏.这类效果一般要用到一些鼠标事件,一类是mouseout和mouseover,另一类是mouseenter和mouseleave. 其中mouseout和mouseover是会冒泡的,可能会出现不想要的结果:而mouseenter和mouseleave是不会冒泡,这个比较理想.但mouseenter和mouseleave只有在IE下才支持.想要在Firefox下用就必须实现mouseenter和m

理解mouseover,mouseout,mouseenter,mouseleave

mouseover定义和用法 当鼠标指针位于元素上方时,会发生 mouseover 事件. 该事件大多数时候会与 mouseout 事件一起使用. mouseover() 方法触发 mouseover 事件,或规定当发生 mouseover 事件时运行的函数. 注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. ? 1 2 3 <div class="parent">父亲             <div

mouseover，mouseout，mouseenter，mouseleave的区别

相信做前端开发的都听说过“冒泡型事件”吧,<JavaScript高级程序设计>第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签,标签上有2个按钮,当且仅当鼠标移入 li 时才会显示上面的2个按钮,如下图,左边是默认状态,右边是鼠标移入状态,开始使用的是 mouseover 和 mouseout ,结果鼠标移动到按钮上时,按钮会出现闪烁的情况.      后来对比了mouseover,mouseout,mouseenter,mouse