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. Nginx支持php

    目录 一.简介 二.配置 三.测试 四.参数 一.简介 Nginx本身只能解析html文件,但有些网页是php写的,就需要Nginx连接php,将网页解析成html再发给客户端. 配置中将.php 结 ...

  2. bcloud_bctf_2016(house of force)

    例行检查我就不放了,该程序是32位的程序 将程序放入ida中 进行代码审计 首先这这里有一个off by null 可以通过这里泄露出来第一个chunk的地址信息 这里也有同样的问题,我看ha1vk师 ...

  3. ciscn_2019_s_3 一道收获很多的题（进步大只能说明基础差）

    32位与64位 系统调用的区别: 1. 传参方式不同 2. 系统调用号 不同 3. 调用方式 不同 32位: 传参方式:首先将系统调用号 传入 eax,然后将参数 从左到右 依次存入 ebx,ecx, ...

  4. M语言的写、改、删（Power Query 之 M 语言）

    M语言基本上和其他语言一样,用敲键盘的方式写入.修改.删除,这个是废话. M语言可以在[编辑栏]或[高级编辑器]里直接写入.修改.删除,这个也是废话. M语言还有个地方可以写入.修改.删除,就是[自定 ...

  5. LuoguP7714 「EZEC-10」排列排序 题解

    Content 给定一个 \(1\sim n\) 的一个排列 \(p\),你每次可以选择一个区间 \([l,r]\) 并花费 \(r-l+1\) 的代价将下标在这个区间内的所有数升序排序,求使得排列 ...

  6. 动态导入模块__import__("str") importlib标准库

    解释器内部使用的为__import__('str') #!/usr/bin/env python # Author:Zhangmingda print('我是aa类 ') #被import的时候就执行 ...

  7. MySQL增删改查的常用语句汇总

    MySQL增删改查的常用语句汇总 以下是总结的mysql的常用语句,欢迎指正和补充~ 一.创建库,删除库,使用库 1.创建数据库:create database 库名; 2.删除数据库:drop da ...

  8. layer 如何加上关闭框

    layer 如何加上关闭框

  9. c++使用map保存成员函数地址

    note 本基于c++11介绍一种使用map保存成员函数地址 可避免使用 if 和 switch 配置灵活 方便, 代码维护效率高 结果: 范例开始 头文件包含 #include <iostre ...

  10. 【LeetCode】856. Score of Parentheses 解题报告（Python & C++）

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