onmouseover事件和onmouseout事件全面了然,深度掌握

2019-07-07 04:41 来源:未知

  这两天接触了onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的描述,下面让我们一起看看它们终究还有神马奇怪的特性,是好还是坏呢?

  今天简单的讲解下onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的描述,下面让我们一起看看它们终究还有神马奇怪的特性,是好还是坏呢?

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

  首先实现一个盒子:

  首先实现一个盒子:

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

韦德娱乐1946网页版 1

      韦德娱乐1946网页版 2

初期代码:

  给这个盒子上绑定上onmouseover事件和onmouseout事件

  给这个盒子上绑定上onmouseover事件和onmouseout事件

<!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>

韦德娱乐1946网页版 3

      韦德娱乐1946网页版 4

首先我们解释一下原因,为什么会出现这些问题。

  发现它们不会发生什么问题,然后(嘿嘿,你懂得!)

  发现它们不会发生什么问题,然后(嘿嘿,你懂得!)

当鼠标从黑色框移到粉色框的时候,此时黑色框的mouseout的被触发,又由于事件冒泡,黑色框的mouseover事件随即被触发,所以实际上,橙色框先消失,然后立即执行淡入动画。这也就是我们看到的过程。

韦德娱乐1946网页版 5

      韦德娱乐1946网页版 6

当鼠标从粉色框移到黑色框的时候,此时黑色框的mouseout又被触发(因为不论鼠标穿过被选元素或其子元素,都触发 mouseover 事件),同时mouseover也被触发,所以又出现了再次执行淡入效果的过程。

  让我们创建一个B元素,让它被嵌套在A元素中,作为A的子元素

  让我们创建一个B元素,让它被嵌套在A元素中,作为A的子元素

方法一:用mouseleave/mouseout代替mouseover/mouseout【最佳方法】

韦德娱乐1946网页版 7

      韦德娱乐1946网页版 8

先看一下mouseout&mouseover与mouseleave&mouseenter用法上的区别

  我们依旧只给外层父元素A绑定onmouseover事件和onmouseout事件,你会发现发生什么了呢?对,没错!当鼠标移入移除A的子元素B的时候居然也发生了onmouseover事件和onmouseout事件!!Why?这不是我想要的!难道这时候B就不在是A的一部分了吗?当然不是,要不也不会在移入B元素时发生onmouseover事件。这样证明,B元素还是A不可分割的一部分啊。

  我们依旧只给外层父元素A绑定onmouseover事件和onmouseout事件,你会发现发生什么了呢?对,没错!当鼠标移入移除A的子元素B的时候居然也发生了onmouseover事件和onmouseout事件!!Why?这不是我想要的!难道这时候B就不在是A的一部分了吗?当然不是,要不也不会在移入B元素时发生onmouseover事件。这样证明,B元素还是A不可分割的一部分啊。

mouseover与mouseenter

  那到底是怎么回事呢?终究还是事件冒泡搞得鬼?大家都知道常用的浏览器中有两种事件流:事件冒泡和事件捕获。让我们看一下事件冒泡的定义:事件按照从最特定的事件目标逐级向上传播到最不特定的事件目标(document对象)的顺序。所以说当鼠标移入移除A的子元素B的时候,B的onmouseover事件和onmouseout事件会触发,但是它自己没有这两个事件啊,就把这两个事件传递给了它的父元素A,A有这两个事件所以就发生了我们看到的情况。

  那到底是怎么回事呢?终究还是事件冒泡搞得鬼?大家都知道常用的浏览器中有两种事件流:事件冒泡和事件捕获。让我们看一下事件冒泡的定义:事件按照从最特定的事件目标逐级向上传播到最不特定的事件目标(document对象)的顺序。所以说当鼠标移入移除A的子元素B的时候,B的onmouseover事件和onmouseout事件会触发,但是它自己没有这两个事件啊,就把这两个事件传递给了它的父元素A,A有这两个事件所以就发生了我们看到的情况。

不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。
韦德娱乐1946网页版,只有在鼠标指针从元素外穿入被选元素(到元素内)时,才会触发 mouseenter 事件。

  有人会说那怎么避免呢,毕竟不是所有人都会是这种需求嘛,我们只要父级元素的事件触发就好,子级元素就让它静静的当个美男子就好了。

  有人会说那怎么避免呢,毕竟不是所有人都会是这种需求嘛,我们只要父级元素的事件触发就好,子级元素就让它静静的当个美男子就好了。

mouseout与mouseleave

  所以W3C在mouseover和mouseout事件中添加了relatedTarget属性 :

  所以W3C在mouseover和mouseout事件中添加了relatedTarget属性 :

不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。
只有在鼠标指针从元素内穿出被选元素(到元素外)时,才会触发 mouseleave 事件。

  •在mouseover事件中,它表示鼠标来自哪个元素
  •在mouseout事件中,它指向鼠标去往的那个元素

  •在mouseover事件中,它表示鼠标来自哪个元素 
  •在mouseout事件中,它指向鼠标去往的那个元素 

可以看一个简单的例子看看二者的区别

  而而Microsoft在mouseover和mouseout事件中添加了两个属性

  而而Microsoft在mouseover和mouseout事件中添加了两个属性 

所以改进的代码可以为

  •fromElement,在mouseover事件中表示鼠标来自哪个元素
  •toElement,在mouseout事件中指向鼠标去往的那个元素

  •fromElement,在mouseover事件中表示鼠标来自哪个元素 
  •toElement,在mouseout事件中指向鼠标去往的那个元素

<!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()阻止事件进一步传播

document.getElementById('box1').onmouseover = function (e) {
if (!e) e = window.event;
var reltg = e.relatedTarget ? e.relatedTarget : e.fromElement;
while (reltg && reltg != this) reltg = reltg.parentNode;
if (reltg != this) {
// 这里可以编写 onmouseenter 事件的处理代码
alert('111');
}
}
document.getElementById('box1').onmouseout = function (e) {
if (!e) e = window.event;
var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;
while (reltg && reltg != this) reltg = reltg.parentNode;
if (reltg != this) {
// 这里可以编写 onmouseleave 事件的处理代码
alert('2222');
}
}

韦德娱乐1946网页版 9韦德娱乐1946网页版 10

e.stopPropagation()会终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。

以上所述是小编给大家介绍的onmouseover事件和onmouseout事件的全面了解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

 1 document.getElementById('box1').onmouseover = function (e) {
 2     if (!e) e = window.event;
 3     var reltg = e.relatedTarget ? e.relatedTarget : e.fromElement;
 4     while (reltg && reltg != this) reltg = reltg.parentNode;
 5     if (reltg != this) {
 6         // 这里可以编写 onmouseenter 事件的处理代码
 7         alert('111');
 8     }
 9 }
10 document.getElementById('box1').onmouseout = function (e) {
11     if (!e) e = window.event;
12     var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;
13     while (reltg && reltg != this) reltg = reltg.parentNode;
14     if (reltg != this) {
15         // 这里可以编写 onmouseleave 事件的处理代码
16         alert('2222');
17     }
18 }
<!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>

您可能感兴趣的文章:

  • js 阻止子元素响应父元素的onmouseout事件具体实现
  • 通过onmouseover选项卡实现img图片的变化
  • JS小功能(onmouseover实现选择月份)实例代码
  • onmouseover和onmouseout的一些问题思考
  • js ondocumentready onmouseover onclick onmouseout 样式
  • 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版
  • js下关于onmouseout、事件冒泡的问题经验小结

View Code

拓展思考:

  

1.如果子元素过多怎么办,难道每个都要去绑定e.stopPropagation()?

  哈哈,妈妈再也不用担心事件冒泡了!

用jquery的一个选择器.children(),比如$('.parent').children()。获得匹配元素集合中每个元素的子元素。

 

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

您可能感兴趣的文章:

  • 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版
  • javascript mouseover、mouseout停止事件冒泡的解决方案
  • as3 rollOver or mouseOver使用说明
  • 扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
  • onmouseover和onmouseout的一些问题思考
  • JS小功能(onmouseover实现选择月份)实例代码
  • 经过绑定元素时会多次触发mouseover和mouseout事件
  • jQuery中mouseover事件用法实例
  • IE中鼠标经过option触发mouseout的解决方法
TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:onmouseover事件和onmouseout事件全面了然,深度掌握