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. ABP VNext框架基础知识介绍（2）--微服务的网关

    ABP VNext框架如果不考虑在微服务上的应用,也就是开发单体应用解决方案,虽然也是模块化开发,但其集成使用的难度会降低一个层级,不过ABP VNext和ABP框架一样,基础内容都会设计很多内容,如 ...

  2. Oracle 函数高级查询

    目录 oracle高级查询 Oracle SQL获取每个分组中日期最新的一条数据 求平均值(为0的参数不均摊) 字符串清除前面的0 判断字符串串是否包含某个字符串 switch 判断 oracle不足 ...

  3. 使用.NET 6开发TodoList应用(4)——引入数据存储

    需求 作为后端CRUD程序员(bushi,数据存储是开发后端服务一个非常重要的组件.对我们的TodoList项目来说,自然也需要配置数据存储.目前的需求很简单: 需要能持久化TodoList对象并对其 ...

  4. CF1569A Balanced Substring 题解

    Content 给定一个长度为 \(n\) 且仅包含字符 a.b 的字符串 \(s\).请找出任意一个使得 a.b 数量相等的 \(s\) 的子串并输出其起始位置和终止位置.如果不存在请输出 -1 - ...

  5. LuoguP5006 [yLOI2018] 大美江湖 题解

    Content 题意实在是太过复杂了,因此请回到题面查看. Data Range 本部分和 Solution 部分变量的含义同题面. \(1\leqslant n,m\leqslant 100,0\l ...

  6. mysql 连接数过多内存增长过快

    mysql连接允许长连接和短链接,但是本身建立连接会有很大开销所以一般连接mysql会使用长连接.但是全部是使用长连接后,可能会出现mysql有时占用内存涨的特别快,这是因为mysql在执行过程中临时 ...

  7. python dumps和loads

    dumps和loads的使用 import json dict = {'姓名': 'supermao','年龄': '19','爱好': '未知', '地区': '武汉'} string=json.d ...

  8. JAVA实现根据图片生成缩略图、裁剪、压缩图片

    依赖(用来复制文件,可以根据自己的来) <dependency> <groupId>commons-io</groupId> <artifactId>c ...

  9. MySQL数据导入报错：Got a packet bigger than‘max_allowed_packet’bytes的问题

    修改my.cnf,需重启mysql. 在 [MySQLd] 部分添加一句(如果存在,调整其值就可以): max_allowed_packet=512M 查找MySql的配置文件my.cnf所在路径参考 ...

  10. CountDownLatch源码阅读

    简介 CountDownLatch是JUC提供的一个线程同步工具,主要功能就是协调多个线程之间的同步,或者说实现线程之间的通信 CountDown,数数字,只能往下数.Latch,门闩.光看名字就能明 ...