关键词：父子元素关系  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. ecmall数据字典

    ecm_acategory //文章分类表 字段 类型 Null 默认 注释 cate_id int(10) 否 自增ID号,分类ID号 cate_name varchar(100) 否 分类的名称 ...

  2. IO/NIO

    1.转换流,Buffered BufferedWriter out=new BufferedWriter(new OutputStreamWriter(System.out)); BufferedRe ...

  3. JavaScript自己模仿jQuery的一点小代码

    function seter(sId) {    var obj = document.getElementById(sId);    return new function () {        ...

  4. OC基础(20)

    Protocol基本概念 Protocol注意事项 Protocol类型限制 代理设计模式 *:first-child { margin-top: 0 !important; } body > ...

  5. OC基础(18)

    Category基本概念 Category注意事项 *:first-child { margin-top: 0 !important; } body > *:last-child { margi ...

  6. bored

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  7. Card objects

    There are fifty-two cards in a deck, each of which belongs to one of four suits and one of thirteen ...

  8. Android中各组件的生命周期

    1.Activity生命周期图 二.activity三种状态 (1)active:当Activity运行在屏幕前台(处于当前任务活动栈的最上面),此时它获取了焦点能响应用户的操作,属于活动状态,同一个 ...

  9. PL/SQL 导入excel表格到oracle数据表

    通过使用PL/SQL 批量查询取数时,将excel中的每一列数据复制黏贴进新建的中间表,黏贴时会有贴歪的情况,也就是某些列会从第二第三行开始插入整列,导致数据乱掉,然后好像又不支持批量删除整列数据,所 ...

  10. swing 复选框

    通过   box1 和 box2的  public boolean isSelected()的方法 返回按钮的状态. 如果选定了切换按钮,则返回 true,否则返回 false.