关键词：父子元素关系  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. sikuli+java实例

      新建java工程,导入sikuli-script.jar包 public class TestSikuli { public static void openPage() throws FindF ...

  2. 动手学servlet(四) cookie和session

    Cookie   cookie是保存在客户端的一个“键值对”,用来存储用户的一些信息 cookie的应用: -在电子商务会话中标识用户 -对网站进行定制,比如你经常浏览哪些内容,就展示哪些页面给你 - ...

  3. 读写ZIP文件

    String zipFile = /D:/+ ".zip";   StringOperator.zip(filePath, zipFile);   InputStream is = ...

  4. JSP SQL注入--破法

    1.JS验证拦截 <%@ page language="java" import="java.util.*" pageEncoding="UTF ...

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

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

  6. Android 媒体键监听以及模拟媒体键盘的实现 demo

    有时我们需要程序模拟按钮或点击,而手机本身又没有,哪么可以采取其它方式 模拟实现,最后再去实际设备去测试(前期一般都拿不到设备): 如上一首,下一首,暂停等,手机上是没有的,但有些设备上是有的,所以我 ...

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

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

  8. 在 C# 控制台中记录异常日志并输出

    最近做了一个小程序,要求在控制台中记录程序运行的异常并输出到指定的文件夹中,以下是我的具体的程序代码: public static void ErrorLog(Exception ex) { stri ...

  9. note name

    谦谦君子:借用<周易·谦>:“初六,谦谦君子,用涉大川,吉.” 温润如玉:化用<诗经·卫风·淇奥>“有匪君子,如切如磋,如琢如磨”之义.

  10. 华为OJ平台——整数的二进制中1的个数

    题目描述: 输入一个整数,求该整数的二进制表达中有多少个1.例如输入10,由于其二进制表示为1010,有两个1,因此输出2. 思路: 这是一道很基本的考查位运算的面试题.包括微软在内的很多公司都曾采用 ...