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

初期代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <script src="jquery.js"></script>
  5.    <meta charset="utf-8">
  6.    <title>mouseover mouseout</title>
  7.    <style type="text/css" media="screen">
  8.        .parent{
  9.    width:200px;
  10.    height:200px;
  11.    background:black;
  12.  }
  13.  .child{
  14.    width:100px;
  15.    height:100px;
  16.    background:pink;
  17.  }
  18.  .a1{
  19.    width:40px;
  20.    height:40px;
  21.    background:orange;
  22.    display:none;
  23.  }
  24.  
  25.    </style>
  26.  </head>
  27.  <body>
  28.  <div class="parent">
  29.    <div class="child"></div>
  30.     <div class="a1"></div>
  31.  </div>
  32.  
  33.   <script>
  34.  $('.parent').on('mouseover',function(e){ 
  35.  
  36.      $('.a1').show(1000);
  37.  
  38.    });
  39.  
  40.    $('.parent').on('mouseout',function(e){
  41.  
  42.      $('.a1').css('display','none');
  43.  
  44.    });
  45.  
  46.   </script>
  47.  </body>
  48.  </html>

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

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

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

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

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

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

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

mouseover与mouseenter

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

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

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

所以改进的代码可以为

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <script src="jquery.js"></script>
  5.    <meta charset="utf-8">
  6.    <title>mouseover mouseout</title>
  7.    <style type="text/css" media="screen">
  8.        .parent{
  9.    width:200px;
  10.    height:200px;
  11.    background:black;
  12.  }
  13.  .child{
  14.    width:100px;
  15.    height:100px;
  16.    background:pink;
  17.  }
  18.  .a1{
  19.    width:40px;
  20.    height:40px;
  21.    background:orange;
  22.    display:none;
  23.  }
  24.    </style>
  25.  </head>
  26.  
  27.  <body>
  28.  <div class="parent">
  29.    <div class="child"></div>
  30.     <div class="a1"></div>
  31.  </div>
  32.  
  33.   <script>
  34.  $('.parent').on('mouseenter',function(e){ 
  35.  
  36.      $('.a1').show(1000);
  37.  
  38.    });
  39.  
  40.    $('.parent').on('mouseleave',function(e){
  41.  
  42.      $('.a1').css('display','none');
  43.  
  44.    });
  45.   </script>
  46.  </body>
  47.  </html>

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

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

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <script src="jquery.js"></script>
  5.    <meta charset="utf-8">
  6.    <title>mouseover mouseout</title>
  7.    <style type="text/css" media="screen">
  8.        .parent{
  9.    width:200px;
  10.    height:200px;
  11.    background:black;
  12.  }
  13.  .child{
  14.    width:100px;
  15.    height:100px;
  16.    background:pink;
  17.  }
  18.  .a1{
  19.    width:40px;
  20.    height:40px;
  21.    background:orange;
  22.    display:none;
  23.  }
  24.  
  25.    </style>
  26.  </head>
  27.  <body>
  28.  <div class="parent">
  29.    <div class="child"></div>
  30.     <div class="a1"></div>
  31.  </div>
  32.  
  33.   <script>
  34.    $('.parent').on('mouseover',function(e){
  35.       $('.a1').show(1000);
  36.  
  37.    });
  38.  
  39.    $('.parent').on('mouseout',function(e){
  40.       $('.a1').css('display','none');
  41.  
  42.    });
  43.  
  44.    $('.child').on('mouseover',function(e){
  45.      e.stopPropagation();
  46.      $('.a1').css('display','block');
  47.      //这是保证动画体的末状态不变
  48.    });
  49.  
  50.    $('.child').on('mouseout',function(e){
  51.      e.stopPropagation();
  52.      //防止从粉色框移出到黑色框时再次触发其他事件
  53.    })
  54.  
  55.   </script>
  56.  </body>
  57.  </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. EXT layout

    1.Vbox createCenterPanel: function () { var pan = Ext.create('Ext.Panel', { height: '100%', title: ' ...

  2. [SQL]sql介绍

    SQL语言概述 结构化查询语言(Structured Query Language,简称SQL)是一种介于关系代数与关系演算之间的语言,是一种用来与关系数据库管理系统通信的标准计算机语言.其功能包括数 ...

  3. http://www.cnblogs.com/chillsrc/category/49632.html

    http://www.cnblogs.com/chillsrc/category/49632.html

  4. mfc 数据库显示到editcontrol控件问题

    http://bbs.csdn.net/topics/390601634 CString CMyDB::VariantToString(const _variant_t &var) {     ...

  5. [分享·JavaScript]提取Table中的内容到XML对象

    在公司工作的时候,经常需要在前端进行这样的数据提取的操作.而之前的针对每个页面中的Table都重新写原生的JS代码效率太低,且不方便aspx对XML进行处理. 所以,在今天抽时间写了这么一个JS类,见 ...

  6. 使用django表单，使网页添加上传文件，并分析文件。

    开发环境是: apache + python + django+ eclipse(开发环境) 欲达到目的: 在网页上,添加上传文件控件.然后读取csv文件,并分析csv文件. 操作步骤: django ...

  7. 解决eclipse中出现Resource is out of sync with the file system问题

    解决eclipse中出现Resource is out of sync with the file system问题 . 分类: 嵌入式开发平台和环境相关 2011-12-27 16:18 4872人 ...

  8. 【Unity Shaders】学习笔记——SurfaceShader（一）认识结构

    [Unity Shaders]学习笔记——SurfaceShader(一)认识结构 转载请注明出处:http://www.cnblogs.com/-867259206/p/5595747.html 写 ...

  9. CODEVS1291 火车线路

    http://codevs.cn/problem/1291/ 题目描述 Description 某列火车行使在C个城市之间(出发的城市编号为1,结束达到的城市的编号为C),假设该列火车有S个座位,现在 ...

  10. 洛谷P1467 循环数 Runaround Numbers

    P1467 循环数 Runaround Numbers 89通过 233提交 题目提供者该用户不存在 标签USACO 难度普及/提高- 提交  讨论  题解 最新讨论 暂时没有讨论 题目描述 循环数是 ...