JQ里面有mouseover和mouseenter  2个事件类型干着差不多的活，用不好经常出现些小问题。

今天我解释一下原理：

事件类型翻译：

mouseover　　　　 鼠标移上

mouseenter　　　　鼠标移进

jQuery的 mouseover 绝对等于原生js的 onmouseover，但使用起来是往往会有些问题。

原生js没有 onmouseenter 的事件类型，jQuery内部给它封装了新的事件类型也就是 mouseenter 来解决这个问题。

 ( 对应还有鼠标离开 onmouseout和mouseleave同理 )

线上demo:  http://jsbin.com/gihaya/1/

<!DOCTYPE html>

<html>

<head>

  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

  <meta charset="utf-8">

  <title>mouseover和mouseenter区别</title>

  <style>

  .over-and-enter div{background:#ccc;padding:20px;width:30%;float:left;margin: 0 10px;}

  .over-and-enter h2{background: #fff;}

  </style>

  <script type="text/javascript">

  var x=0;

  var y=0;

  $(function(){

      $('.over').mouseover(function(){

          $('.over span').html( x+=1 );

      });

      $('.enter').mouseenter(function(){

          $('.enter span').html( y+=1 );

      });

  });

  </script>

</head>

<body>

<div class="over-and-enter">

    <p>不论鼠标<b>移上被选元素或其子元素</b>，都会触发 mouseover 事件。</p>

    <p>鼠标移进被选元素，不管在其内部如何移动，<b>只触发一次</b> mouseenter 事件。</p>

    <div class="over">

    <h2>被触发的 mouseover 事件：<span></span></h2>

    </div>

    <div class="enter">

    <h2>被触发的 mouseenter 事件：<span></span></h2>

    </div>

</div>

</body>

</html>

工作中可能遇到的bug。

线上demo: http://jsbin.com/lacepe/1/

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>mouseenter和mouseleave</title>

    <style>

    .father{width:100%;height:200px;background: #ccc;border: 1px solid #000;display: none;cursor: pointer;}

    .children{width: 95%;height:150px;background: #eee;margin: 10px auto;cursor: pointer;}

    </style>

    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script>

    $(function(){

        // js原生事件有onmouseover和onmouseout，功能是绝对等于jQ的mouseover和mouseout

        $('button').mouseover(function(){

            $('.father').show();

        });

        // jQuery封装了2个新的事件，mouseenter和mouseleave来检测移进/出被选元素的次数

        $('.father').mouseout(function(){

            $('.father').hide();

        });

        // demo的bug把mouseout事件类型换成mouseleave即可。

        // 总结：

        // 我们jquery 里面 不太用  mouseover      mouseout

        // 而我们喜欢用            mouseenter     mouseleave

    })

    </script>

</head>

<body>

    <button>鼠标过来</button>

    <div class="father">

        我是下拉菜单,<b>离开我的范围我才隐藏起来</b>。

        <div class="children">我可能是下拉菜单的内容,<b>移到我这里看看。</b></div>

    </div>

</body>

</html>

解决办法：demo的bug把mouseout事件类型换成mouseleave即可。

总结：

我们jquery 里面 不太用   mouseover             mouseout

而我们喜欢用                    mouseenter            mouseleave

jQuery里的mouseover与mouseenter事件类型区别的更多相关文章

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

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

  2. jquery的bind跟on绑定事件的区别

    jquery的bind跟on绑定事件的区别:主要是事件冒泡: jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(ev ...

  3. 一个例子说明mouseover事件与mouseenter事件的区别

    <html> <head> <meta charset="UTF-8"> <title>haha</title> < ...

  4. mouseover事件与mouseenter事件的区别

    不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.对应mouseout 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件.对应mouseleave 被触发的 M ...

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

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

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

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

  7. setTimeout用于取消多次执行mouseover或者mouseenter事件,间接实现hover的悬停加载的效果.

    Mouseenter在鼠标滑上去不会对其子元素也发生监听, Mouseover在鼠标滑上去会对其子元素发生监听. 所以对于事件的监听,我们要看需求,这里是对父元素的监听,不需要对子元素做监听.就用mo ...

  8. JQuery中的mouseover和mouseenter的区别

    mouseover和mouseout是一对:mouseenter和mouseleave是一对. 相同点:都是鼠标经过就触发事件 不同点: 给外盒子一个经过触发事件,但是mouseover会在鼠标经过外 ...

  9. EasyUI 中 Combobox里的onChange和onSelect事件的区别

    EasyUI 中 Combobox 选项发生改变时会触发 onChange,onSelect,onClick 3 个事件. 最近要做一个级联的 Combo 菜单,类似于选择地址时让用户填写省,市,区的 ...

随机推荐

  1. 一文详解 纹理采样与Mipmap纹理——构建山地渲染效果

    在开发一些相对较大的场景时,例如:一片铺满相同草地纹理的丘陵地形,如果不采用一些技术手段,就会出现远处的丘陵较近处的丘陵相比更加的清晰的视觉效果,而这种效果与真实世界中近处的物体清晰远处物体模糊的效果 ...

  2. < 转>Java 反射机制浅析

    一.什么是反射: 反射的概念是由Smith在1982年首次提出的,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力.这一概念的提出很快引发了计算机科学领 域关于应用反射性的研究.它首先被程序 ...

  3. CF935B Fafa and the Gates 题解

    Content 一个动点 \(F\) 一开始在平面直角坐标系上原点的位置,随后它会移动 \(n\) 次,每次只能向上走或者向右走 \(1\) 个单位,求经过直线 \(y=x\) 的次数. 数据范围:\ ...

  4. java 数据类型：ArrayList；LinkList性能分析

    各种线性表的性能分析. java提供的List就是一个线性表接口,ArrayList和LinkedList是线性表的两种实现.基于数组的线性表和基于链表的线性表. 一般来说,我们无需理会ArrayLi ...

  5. ConfigParser模块，主要应用于对php.ini等格式的配置文件内容读取和生成。删改较少用

    *.ini配置文件样例 创建默认的文件样例 读取文件内容 read() configparser增删改查语法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ...

  6. Mybatis-Plus中使用max、sum聚合函数、只查询指定字段、查询语句多个OR处理

    聚合函数查询 可以使用以下方法 QueryWrapper queryWrapper = new QueryWrapper<>(); queryWrapper.select(" I ...

  7. clang编译代码报错：`_start': (.text+0x24): undefined reference to `main'

    1. 说明 使用clang++10.1编译报错: /usr/bin/ld: /usr/lib/gcc/x86_64-linux-gnu/9/../../../x86_64-linux-gnu/crt1 ...

  8. 再谈多线程模型之生产者消费者（基础概念）（c++11实现）

    0.关于 为缩短篇幅,本系列记录如下: 再谈多线程模型之生产者消费者(基础概念)(c++11实现)[本文] 再谈多线程模型之生产者消费者(单一生产者和单一消费者)(c++11实现) 再谈多线程模型之生 ...

  9. 【九度OJ】题目1171：C翻转 解题报告

    [九度OJ]题目1171:C翻转 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1171 题目描述: 首先输入一个5 * 5的数组,然 ...

  10. 【LeetCode】463. Island Perimeter 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 减去相交部分 参考资料 日期 题目地址:https: ...