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

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

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

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

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

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

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

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

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

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

  1. mouseover、mouseout，mouseenter、mouseleave区别

    心情压抑的一天,我想好好的. mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseen ...

  2. jquery的hover mouseover mouseout mouseenter mouseleave的区别

    jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...

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

    $('.box1').mouseenter(function(){//穿入事件mouseenter $(this).css('background','red'); }).mouseleave(fun ...

  4. mouseover,mouseout,mouseenter,mouseleave的区别

    1.前言 今天下午参加一个面试,对方问我写不写博客,这时候才猛然意识到好久没写东西了.最近一直在外边实习,每天有很多经历和挑战,但是却没有及时地记录下来,这一点必须得批评自己,以后得经常把自己遇到的问 ...

  5. mouseover，mouseout，mouseenter，mouseleave的区别

    相信做前端开发的都听说过“冒泡型事件”吧,<JavaScript高级程序设计>第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签 ...

  6. jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

    hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mou ...

  7. 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

    轮播中大多会选择mouseover和mouseout  这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...

  8. mouseover，mouseout与mouseenter，mouseleave

    针对单个元素,使用感一样. 差异提现在有子元素的情况下: mouseover和mouseout在父元素和其子元素都可以触发,当鼠标穿过一个元素时,触发次数得依子元素数量而言. mouseenter和m ...

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

    定义和用法 hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数. jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件. jQuery 1.8 ...

随机推荐

  1. Silverlight RadChart :创建十字定位&圈选

    //图像加载 void Chart_Loaded(object sender, RoutedEventArgs e) { var plotAreaPanel = this.radChart.Defau ...

  2. HackerRank-Longest Subarray

    give an array and target value, find the max length of the subarray which sum of the elements is les ...

  3. qsort C++ VS2013 leetcode

    class Solution { private: static int compare(const void * a, const void * b) { return (*(int*)a - *( ...

  4. java System.arraycopy 数组复制和合并

    public class Test { public static void main(String[] args) { Integer[] a = {1,2,3}; Integer[] b = {4 ...

  5. 树莓派(Raspberry Pi)日期时间不准的修正方法

    在树莓派上,打date命令可以看到系统的日期时间: 后面的CST表示中国标准时间 小知识: 树莓派没有电池,断电后无法保存时间. 树莓派默认安装了NTP(Network Time Protocol)服 ...

  6. Redis -- 03 持久化

    Redis提供了两种不同的方法来将数据存储到硬盘里面,一种叫内存快照,另一种叫只追加文件(AOF),这两种方法既可以同时使用课可以单独使用,也可以都不使用,取决于场景. 快照 快照是将某一时刻的所有数 ...

  7. Saying that Java is nice because it works on every OS is like saying that anal sex is nice because it works on every gender.

    Saying that Java is nice because it works on every OS is like saying that anal sex is nice because i ...

  8. nginx下rewrite参数超过9个的解决方法

    nginx 在处理多于9个参数的时候,是采用重命名的方法来实现的: /?m?([0-9,]*)h?(\d*)a?([0-9,]*)c?(\d*)s?(x?f?(?P<f>[0-9,]*)/ ...

  9. mybatis实战教程(mybatis in action)之五：与spring3集成

    在这一系列文章中,前面讲到纯粹用mybatis 连接数据库,然后 进行增删改查,以及多表联合查询的的例子,但实际项目中,通常会用 spring 这个沾合剂来管理 datasource 等.充分利用sp ...

  10. mybatis实战教程(mybatis in action)之三：实现数据的增删改查

    前面已经讲到用接口的方式编程.这种方式,要注意的一个地方就是.在User.xml  的配置文件中,mapper namespace="com.yihaomen.mybatis.inter.I ...