关键词：父子元素关系  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. maven项目导入报错

    极大可能是仓库设置问题

  2. HTML5的动画学习历程

    一.三角学原理. function getRadio(d){//根据角度获得弧度,                return d*Math.PI/180;                }, fun ...

  3. esriSRGeoCS2Type Constants

    ArcGIS Developer Help  (Geometry)     esriSRGeoCS2Type Constants More geographic coordinate systems. ...

  4. [SQL]SUTFF内置函数的用法

    STUFF 删除指定长度的字符并在指定的起始点插入另一组字符. 语法 STUFF ( character_expression , start , length , character_express ...

  5. java类总结

    1.java类与类之间存在六种关系:继承,实现,依赖,关联,聚合组成 2.一个类可以继承另外一个类,并在此基础上添加自己的特有的功能. 3.一个类的方法中操作另外一个类的对象,这种情况称为第一个类依赖 ...

  6. 单选按钮，通过js判断是否选中

    <input type="radio" value="0" style="vertical-align:middle" name=&q ...

  7. HDU 4770 Lights Against Dudely

    Lights Against Dudely Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  8. 日志组件logback的介绍及配置使用方法

    一.logback的介绍 Logback是由log4j创始人设计的又一个开源日志组件.logback当前分成三个模块:logback-core,logback- classic和logback-acc ...

  9. gis 导出 dwg，shp

    当我们在webgis 想要把某个地块或者多个地块导出dwg或者shp文件的时候怎么办?这个时候最好就是用后台的方式.首先把web gis上的graphic 的polygon提取为坐标的形式(类似于x, ...

  10. 获取oracle 里的表名与字段

    --数据库表名 SELECT distinct A.OBJECT_NAME as TAB_NAME,B.comments as DESCR FROM USER_OBJECTS A , USER_TAB ...