关键词：父子元素关系  mouseout  mouseover  事件  事件冒泡

初期代码：

 <!DOCTYPE html>

 <html>

 <head>

 <script src="jquery.js"></script>

   <meta charset="utf-8">

   <title>mouseover mouseout</title>

   <style type="text/css" media="screen">

       .parent{

   width:200px;

   height:200px;

   background:black;

 }

 .child{

   width:100px;

   height:100px;

   background:pink;

 }

 .a1{

   width:40px;

   height:40px;

   background:orange;

   display:none;

 }

   </style>

 </head>

 <body>

 <div class="parent">

   <div class="child"></div>

    <div class="a1"></div>

 </div>

  <script>

 $('.parent').on('mouseover',function(e){ 

     $('.a1').show(1000);

   });

   $('.parent').on('mouseout',function(e){

     $('.a1').css('display','none');

   });

  </script>

 </body>

 </html>

我想实现的目标：当鼠标进入黑色框时，橙色框执行淡入动画；当黑色框范围移动的时候（即使经过粉色框，动画仍然不被触发）；当鼠标移出的时候，橙色方块消失。

遇到的问题阐述：当鼠标移入黑色框的时候，橙色框执行淡入动画，但是当鼠标从黑色框经过粉色框的时候，橙色框就消失了，然后又执行一遍淡入动画。当鼠标从粉色框移出到黑色框的时候，橙色框的淡入动画又被执行。这不是我想要的。

首先我们解释一下原因，为什么会出现这些问题。

当鼠标从黑色框移到粉色框的时候，此时黑色框的mouseout的被触发，又由于事件冒泡，黑色框的mouseover事件随即被触发，所以实际上，橙色框先消失，然后立即执行淡入动画。这也就是我们看到的过程。

当鼠标从粉色框移到黑色框的时候，此时黑色框的mouseout又被触发（因为不论鼠标穿过被选元素或其子元素，都触发 mouseover 事件），同时mouseover也被触发，所以又出现了再次执行淡入效果的过程。

方法一：用mouseleave/mouseout代替mouseover/mouseout【最佳方法】

先看一下mouseout&mouseover与mouseleave&mouseenter用法上的区别

mouseover与mouseenter

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针从元素外穿入被选元素（到元素内）时，才会触发 mouseenter 事件。

mouseout与mouseleave
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针从元素内穿出被选元素（到元素外）时，才会触发 mouseleave 事件。

可以看一个简单的例子看看二者的区别

所以改进的代码可以为

 <!DOCTYPE html>

 <html>

 <head>

 <script src="jquery.js"></script>

   <meta charset="utf-8">

   <title>mouseover mouseout</title>

   <style type="text/css" media="screen">

       .parent{

   width:200px;

   height:200px;

   background:black;

 }

 .child{

   width:100px;

   height:100px;

   background:pink;

 }

 .a1{

   width:40px;

   height:40px;

   background:orange;

   display:none;

 }

   </style>

 </head>

 <body>

 <div class="parent">

   <div class="child"></div>

    <div class="a1"></div>

 </div>

  <script>

 $('.parent').on('mouseenter',function(e){ 

     $('.a1').show(1000);

   });

   $('.parent').on('mouseleave',function(e){

     $('.a1').css('display','none');

   });

  </script>

 </body>

 </html>

方法二：利用e.stopPropagation()阻止事件进一步传播

e.stopPropagation()会终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

 <!DOCTYPE html>

 <html>

 <head>

 <script src="jquery.js"></script>

   <meta charset="utf-8">

   <title>mouseover mouseout</title>

   <style type="text/css" media="screen">

       .parent{

   width:200px;

   height:200px;

   background:black;

 }

 .child{

   width:100px;

   height:100px;

   background:pink;

 }

 .a1{

   width:40px;

   height:40px;

   background:orange;

   display:none;

 }

   </style>

 </head>

 <body>

 <div class="parent">

   <div class="child"></div>

    <div class="a1"></div>

 </div>

  <script>

   $('.parent').on('mouseover',function(e){

      $('.a1').show(1000);

   });

   $('.parent').on('mouseout',function(e){

      $('.a1').css('display','none');

   });

   $('.child').on('mouseover',function(e){

     e.stopPropagation();

     $('.a1').css('display','block');

     //这是保证动画体的末状态不变

   });

   $('.child').on('mouseout',function(e){

     e.stopPropagation();

     //防止从粉色框移出到黑色框时再次触发其他事件

   })

  </script>

 </body>

 </html>

拓展思考：

1.如果子元素过多怎么办，难道每个都要去绑定e.stopPropagation()?

用jquery的一个选择器.children()，比如$('.parent').children()。获得匹配元素集合中每个元素的子元素。

 

备注：这篇文章中遇到同样的问题，但我并没怎么看懂，而且觉得有点麻烦，逻辑较繁重。同学们可以作参考。

【原创】解决鼠标经过子元素触发mouseout，mouseover事件的问题的更多相关文章

  1. 如何防止鼠标移出移入子元素触发mouseout和mouseover事件

    js代码: function isMouseLeaveOrEnter(e, handler) { var reltg=e.relatedTarget?e.relatedTarget:e.type==' ...

  2. jquery如何阻止子元素相应mouseout事件

    jquery如何阻止子元素相应mouseout事件:mouseout有一个特点,当鼠标移入子元素的时候,也会触发此事件,但是在实际应用中这个特点往往不是我们想要的,下面就通过代码实例介绍一下如何实现此 ...

  3. 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响

    原文地址 背景 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当a标签内部存在嵌套时, 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存 ...

  4. 如何禁用事件的浮升（div的子元素的点击事件会触发父元素的点击事件）

    <div onclick="alert();"> <div onclick="alert();"></div> </d ...

  5. <a>标签，鼠标经过或者停留触发延时响应事件

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcUAAAEoCAIAAACmeX2PAAAgAElEQVR4nOzdd3xUdb74f3+Pu3v33t ...

  6. mouseover和mouseout事件在鼠标经过子元素时也会触发

    JavaScript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jQuery解决办法: jquer ...

  7. 如何阻止div中的子div触发div的事件

    <div class="sideFrame" v-on:click="hideside"> <div class="sideFram ...

  8. 【转载】设置event.cancelBubble，使触发子元素的onclick不同时触发父元素的onclick

    由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcEleme ...

  9. a标签嵌套href默认行为与子元素click事件存在影响

    2018-08-07 Question about work 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当<a>标签内部存在嵌套时, 父元素&l ...

随机推荐

  1. AngularJs创建服务

    在开发中我们总是需要向服务器请求同样的数据,那么我们如何来把他们提取出来进行封装一下呢,这就需要用到服务了. 需要用到关键字factory了. <!DOCTYPE html> <ht ...

  2. [ZOJ 1009] Enigma (模拟)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1009 题目大意:给你三个转换轮,只有当第一个转换轮转动一圈后第二 ...

  3. DatabaseError: no such table: django_session

    最近我也遇到这个问题了,从网上查了下,说是数据库同步出了问题,只需要运行如下命令:python manage.py syncdb就可以了 (这是django1.4之前的命令,1.4之后的是 pytho ...

  4. 菜鸟-手把手教你把Acegi应用到实际项目中(3)

    这一节我们将要了解的是AnonymousProcessingFilter.RememberMeProcessingFilter和LogoutFilter三个过滤器. 1.AnonymousProces ...

  5. (转)Struts2返回JSON对象的方法总结

    转自:http://kingxss.iteye.com/blog/1622455 如果是作为客户端的HTTP+JSON接口工程,没有JSP等view视图的情况下,使用Jersery框架开发绝对是第一选 ...

  6. 你很牛B，面试却没过，为什么？

    点击标题下「飞测」可快速关注 坚持的是分享,搬运的是知识,图的是大家的进步,没有收费的培训,没有虚度的吹水,喜欢就关注.转发(免费帮助更多伙伴)等来交流,想了解的知识请留言,给你带来更多价值,是我们期 ...

  7. [原创]大连sap vt 实习生面试经历

    从决定参加这次面试开始,求职生涯就算是开始了,虽然失败了,但也是亲身体会到了面试的感觉,这次经历也作为第一篇博客. 大连sap的职能是sap的全球技术支持中心和解决方案提供中心.VT项目提供的岗位是技 ...

  8. 慕课网-安卓工程师初养成-2-10 Java中的强制类型转换

    来源:http://www.imooc.com/code/1241 相信小伙伴们也发现了,尽管自动类型转换是很方便的,但并不能满足所有的编程需要. 例如,当程序中需要将 double 型变量的值赋给一 ...

  9. 在git 服务器挂载新的项目

      1.cmd 到新创建的文件夹位置,然后 执行该命令git init --bare 2.在客户端克隆项目到文件夹(空),将项目复制到该空文件夹下,然后打开git extent,提交并推送

  10. Android ROM 备书

    1. Android ROM 目录接口 我们经常说的刷ROM是刷系统的意思,但是ROM的原意并不是这样,ROM的全称是read only memory只读储存器,正因为它是“只读”的,而且系统文件通常 ...