JS中onmouseover与onmouseout的bug - 奈何鸿飞雁

公告

JS中onmouseover与onmouseout的bug

onmouseleave 事件在鼠标移除元素时触发。

onmouseenter 事件在鼠标指针移动到元素上时触发。

onmouseout 事件会在鼠标指针移出指定的对象时发生。

onmouseover 事件会在鼠标指针移动到指定的对象上时发生

onmouseleave、onmouseenter，鼠标进入到指定元素区域内触发事件，不支持冒泡，不包含子元素的区域。

onmouseout、onmouseover、鼠标进入指定元素触发事件，含子元素区域。

事件冒泡，具有两面性的，有时候给我们带来bug,有时候优点也很明显。我们就一起来看看它的真面目。

首先看看事件冒泡是什么？

事件冒泡：当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件也不会有什么表现但事件确实传递了。）

在Javascript中，父元素包含子元素，当给父元素设置onmouseover或onmouseout事件时，鼠标在父级和子级间移动时会多次触发onmouseover事件或onmouseout事件；。所以这个问题要解决，不然在以后的事例中出现很大的问题。看个栗子：

 1 <!DOCTYPE html>
 2 <html lang="en" dir="ltr">
 3   <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style>
 7       .div1{ width:200px; height:200px; background:#ccc; margin:40px auto;position: relative;}
 8       .div2{ width:200px;height:30px; background:yellow;position: absolute;top: -30px;left: 0;}
 9     </style>
10     <script type="text/javascript">
11       window.onload = function(){
12         var odiv1 = document.getElementsByClassName('div1')[0];
13         var odiv2 = document.getElementsByClassName('div2')[0];
14         odiv1.onmouseover = function(ev){
15           console.log(1);
16         }
17       }
18     </script>
19   </head>
20   <body>
21     <div class="div1">
22       <div class="div2">
23 
24       </div>
25     </div>
26   </body>
27 </html>

鼠标在父级（div1）和子级(div2)间移动时会多次触发onmouseover事件,将onmouseover事件换成onmouseout事件同理。

下面我们首先要熟悉几个对象与方法：

1）事件对象：

2）事件对象相关属性(只针对onmouseover与onmouseout):

　　标签源：oEvent.fromElement(引用移出鼠标的元素)：兼容IE,Chrome

　　　　　　oEvent.toElement(引用移入鼠标的元素)：兼容IE,Chrome

　　　　　　oEvent.relateTarget(返回与事件的目标节点相关的节点)：兼容火狐

3）Node.contains()返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点 : node.contains( otherNode ) ,(如果 otherNode 是 node 的后代节点或是 node 节点本身.则返回true , 否则返回 false)

了解了上面的方法后，开始解决上面的问题：当onmouseover时，鼠标移过父级元素的时候，不会有任何的问题，当从父级移入子级的时候就会出现问题；同样当onmouseout时，鼠标从父级移出的时候也没有问题，但从子级往父级移动的时候就会多次触发onmouseout事件，我们解决的方法就是设置当从父级移入子级的时候或是从子级往父级移动的时候这个事件无效。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .div1{ width:200px; height:200px; background:#ccc; margin:40px auto;position: relative;}
      .div2{ width:200px;height:30px; background:yellow;position: absolute;top: -30px;left: 0;}
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var odiv1 = document.getElementsByClassName('div1')[0];
        var odiv2 = document.getElementsByClassName('div2')[0];
        odiv1.onmouseover = function(ev){
            var oEvent=ev||event;
            var oFrom=oEvent.fromElement||oEvent.relateTarget;
            if (this.contains(oFrom)){return;}
            console.log("hahahah");
        }
      }
    </script>
  </head>
  <body>
    <div class="div1">
      <div class="div2">
      </div>
    </div>
  </body>
</html>

同样的鼠标移出事件onmouseout时，可以写成下面这种：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .div1{ width:200px; height:200px; background:#ccc; margin:40px auto;position: relative;}
      .div2{ width:200px;height:30px; background:yellow;position: absolute;top: -30px;left: 0;}
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var odiv1 = document.getElementsByClassName('div1')[0];
        var odiv2 = document.getElementsByClassName('div2')[0];
        odiv1.onmouseout = function(ev){
            var oEvent=ev||event;
            var oFrom=oEvent.toElement||oEvent.relateTarget;
            if (this.contains(oFrom)){return;}
            console.log("hahahah");
        }
      }
    </script>
  </head>
  <body>
    <div class="div1">
      <div class="div2">
      </div>
    </div>
  </body>
</html>

其实我们还可以使用onmouseenter与onmouseleave事件来代替onmouseover与onmouseout事件，网上查了一下说onmouseenter与onmouseleave事件不稳定，而且有的时候只兼容IE内核的浏览器

posted on 2018-07-12 14:26 奈何鸿飞雁阅读(391) 评论(0) 收藏举报

刷新页面返回顶部