鼠标经过子元素触发mouseout,mouseover事件的解决方案


Posted in Javascript onJuly 26, 2015

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

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

初期代码:

<!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()。获得匹配元素集合中每个元素的子元素。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
全网小程序接口请求封装实例代码
Nov 06 Javascript
javascript中setTimeout使用指南
Jul 26 #Javascript
jquery不常用方法汇总
Jul 26 #Javascript
浅谈JavaScript中指针和地址
Jul 26 #Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 #Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 #Javascript
javascript创建动态表单的方法
Jul 25 #Javascript
javascript文件加载管理简单实现方法
Jul 25 #Javascript
You might like
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
js倒计时显示实例
2016/12/11 Javascript
js评分组件使用详解
2017/06/06 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
python编程嵌套函数实例代码
2018/02/11 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
经济信息管理专业大学生求职信
2013/09/27 职场文书
募捐倡议书
2014/04/14 职场文书
小学校长汇报材料
2014/08/20 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
Python图像处理库PIL详细使用说明
2022/04/06 Python
基于docker安装zabbix的详细教程
2022/06/05 Servers