关键词：父子元素关系  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. android SFC

    本系列适合0基础的人员,因为我就是从0开始的,此系列记录我步入Android开发的一些经验分享,望与君共勉!作为Android队伍中的一个新人的我,如果有什么不对的地方,还望不吝赐教. 在开始Andr ...

  2. Mingyang.net：org.springframework.context.annotation.ConflictingBeanDefinitionException

    org.springframework.context.annotation.ConflictingBeanDefinitionException: Annotation-specified bean ...

  3. hdu-Danganronpa(AC自动机)

    Problem Description Danganronpa is a video game franchise created and developed by Spike Chunsoft, t ...

  4. JavaScript显示分页按钮

    /** * 获取分页按钮 * @param total_page 总页数 * @param current_page 当前页 * @param num 每页显示多少个分页按钮 * @returns { ...

  5. Oracle索引HINT的使用

    存储在数据库中数据的分布情况开发人员或管理员比Oracle优化器更加的清楚,在优化器不能作出最有查询路径选择的情况下,使用HINT(提示)人为的固定查询路径,一定程度能生成更优的执行计划.       ...

  6. django models 建立好后，table也创建成功了，为什么网页后台不显示的问题

    刚学,遇到这个问题,所以向大神请教,大神给了两个词,admin ,register.感觉像被雷击中了一样,原来忘记了,注册(register) 解决方法就是:在admin.py中对你的model进行注 ...

  7. Android常用知识笔记

    1. 安卓图片自适应 android从1.6和更高,Google为了方便开发者对于各种分辨率机型的移植而增加了自动适配的功能  <supports-screens  android:largeS ...

  8. WIFI知识累计之802.11协议radiotap头解析方法

    radiotap官方网站:http://www.radiotap.net/Radiotap 该网站详细介绍了radiotap的各个字段的长度和介绍,并包含解析代码项目地址,该文就在此网站的基础编写一些 ...

  9. 传输层（一）TCP的三次握手和四次挥手及关闭套接字的原理

    TCP连接需三次握手才能建立,断开连接则需要四次握手. 客户端TCP状态迁移: CLOSED->SYN_SENT->ESTABLISHED->FIN_WAIT_1->FIN_W ...

  10. 解决linux中Kipmi0进程对CPU使用率很高问题

    kipmi is supposed to run with low priority. When you say it consumes 70-90% of the CPUs, is that con ...