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. 07- Vue3 UI Framework - Switch 组件

    为了更好的提升用户体验,我们这里再做一个很常用的开关组件 switch 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 switch 组件应分为选中/未被选中,两种状态 可以通过 ...

  2. Windows11下载地址

    10月5日微软推出了Win11正式版本,但是仍然不支持apk格式,不免让人失望.下面是Win11商业版本下载地址: 下载地址1: ed2k://|file|zh-cn_windows_11_busin ...

  3. Git差异并列显示

    默认的git diff命令只会将文件的修改差异使用"+","-"符号标注出来,并不直观. 最理想的方式应该是使用诸如"DiffMerge"这 ...

  4. 在mysql5.8中用json_extract函数解析json

    背景:某个字段的数据中是JSON,需要提取其中的卡号部分,如: {"objType":"WARE","orderId":6771254073 ...

  5. Linux使用docker部署nacos

    官网地址:https://nacos.io/zh-cn/docs/quick-start-docker.html 先把sql文件导入到mysql中 我也放了基础的sql /* * Copyright ...

  6. JAVA实现map集合转Xml格式

    import java.util.Iterator; import java.util.SortedMap; import java.util.TreeMap; public class MainTe ...

  7. 【LeetCode】604. Design Compressed String Iterator 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 维护当前字符和次数 日期 题目地址:https://l ...

  8. 【LeetCode】188. Best Time to Buy and Sell Stock IV 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  9. 【LeetCode】225. Implement Stack using Queues 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  10. 【计组】《计算机组成与体系结构性能设计》William Stallings 第2部分 计算机系统 第3章 计算机功能和互连的顶层视图

    关键词 address bus 地址总线 asynchronous timing 异步时序 bus 总线 bus arbitration 总线仲裁 bus width 总线宽度 centralized ...