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. ERROR: Command errored out with exit status 1:安装pip3 install --user pyecharts==0.5.11失败问题总结

    一.前言:最近在学习pyecharts学习到Grid时候发现代码无法运行了,经过在网上查找资料说是pyecharts版本不适配了,之前的版本是 pip install pyecharts==0.1.9 ...

  2. Linux——配置主从数据库服务

    主从数据库 Linux中,数据库服务有三种:互为主主,互为主从,一主一从(主从数据库) 互为主主:数据库时时更新 互为主从:数据库达到一定的的容量再更新 一主一从:在主数据库上面创建的,可以同步到从数 ...

  3. 解放双手，自动生成“x.set(y.get)”，搞定vo2dto转换

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 给你机会,你也不中用啊 这些年从事编程开发以来,我好像发现了大部分研发那些不愿意干的 ...

  4. pdf文件在线预览

    使用pdfjs技术实现PDF的在线预览功能. 目录 1.官网下载pdf.js 2. 将下载下来的文件全部复制 3. js使用 4. java IO流 1.官网下载pdf.js 2. 将下载下来的文件全 ...

  5. Lookup函数（Excel函数集团）

    此处文章均为本妖原创,供下载.学习.探讨! 文章下载源是Office365国内版1Driver,如有链接问题请联系我. 请勿用于商业!谢谢 下载地址:https://officecommunity-m ...

  6. 【大咖直播】Elastic 企业搜索实战工作坊（第二期）

    借助 App Search 提供的内置功能,您可轻松打造卓越的搜索体验.直观的相关度调整以及开箱即用的搜索分析,不仅可以优化所提供的内容,其提供的 API 还可帮助您将位于各处的所有内容源关联在一起. ...

  7. LuoguB2101 计算矩阵边缘元素之和 题解

    Content 给定一个 \(m\times n\) 的矩阵,求矩阵边缘元素之和. 数据范围:\(1\leqslant m,n\leqslant 100\). Solution 对于新手来说,看到这题 ...

  8. CF1445A Array Rearrangement 题解

    Content 有 \(t\) 组询问,每组询问给定两个长度为 \(n\) 的数列 \(\{a_i\}_{i=1}^n,\{b_i\}_{i=1}^n\) 和一个整数 \(x\),求是否能够重新对两个 ...

  9. AT5221 [ABC140C] Maximal Value 题解

    Content 有一个长度为 \(n\) 的数列 \(A\) 未知,已知一个数列 \(B=\{b_1,b_2,...,b_{n-1}\}\),且满足 \(b_i\geqslant \max\{a_i, ...

  10. windows下php安装redis扩展

    查看当前PHP版本 代码中添加 phpinfo(); 下载对应的redis扩展 下载链接:https://pecl.php.net/package/redis 因为我的PHP版本是5.6的,所以red ...