onmouseover和onmouseout事件冒泡导致闪烁的问题

在一个元素上同时绑定onmouseover和onmouseout事件时， 如果这个元素包含有子元素，那么当鼠标在元素内部移动时，会因为事件冒泡而发生以下情况：在元素内部从区域1移动到子元素区域2， 依然会触发onmouseout和onmouseover事件。我是在做一个table表格时，利用onmouseout和onmouseover来动态绘不同的制折线图，所以这种情况会导致table和折线图一直闪烁，解决办法如下：

<div id="div1">
	<div id="div2">div>
div>

1.利用relatedTarget属性和contains，判断鼠标是否在元素内部移动，如果是则返回。
在mouseout事件中， target是移出的元素，relatedTarget是对应移入的元素。
在mouseover事件中， target是移入的元素，relatedTarget是移入之前的元素。
在mouseover事件中判断鼠标是否在元素内部移动:

var oDiv = document.getElementById("div1");
oDiv.onmouseover = function(e) {
      var e = e || window.event;
      //e.fromELement兼容IE
      var eFrom = e.fromElement || e.relatedTarget;
      if (oDiv.contains(eFrom)) {
          return;
       }
};

在mouseout事件中判断鼠标是否在元素内部移动：

oDiv.onmouseover = function(e) {
      var e = e || window.event;
      //e.fromELement兼容IE
      var eTo = e.toElement || e.relatedTarget;
      if (oDiv.contains(eTo)) {
          return;
       }
};

2.如果在不需要使用事件冒泡的情况下， 还可以将onmouseover和onmouseout替换成onmouseenter和onmouseleave来解决这个问题。onmouseenter和onmouseleave不支持事件冒泡，除此之外其他功能和onmouover和onmouseout相同。原理就是当鼠标在元素内部移动时，子元素不会因为事件冒泡而触发onmouse事件，onmouse事件只对绑定的父元素有效。

3.还有一种解决方法，只有在你的子元素不需要执行任何鼠标事件时使用，就是给子元素设置css属性pointer-events： none；，MDN对none的解释：将pointer-events设置为none以后， 该元素永远不会成为鼠标事件的对象， 也就是不会对任何鼠标事件有响应，比如onclick等。