解决在ie浏览器中使用onmouseover和onmouseout事件导致函数一直调用页面闪动的问题

关键函数,contains()。在IE中,所有的HTML元素都有一个contains方法,它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发,如果内部元素导致了不需要的事件被触发,那我们就忽略这个事件。所以,解决方法为:

在onmouseover时先进行如下判断,结果为true时再执行方法体:
if(!this.contains(event.fromElement)){MouseOverFunc()}
在onmouseout时先进行如下判断,结果为true时再执行方法体:
if(!this.contains(event.toElement)){MouseOutFunc()}

event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素;event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。
那么上面两行代码的含义就分别是:
○ 当触发onmouseover事件时,判断鼠标离开的元素是否是当前元素的内部元素,如果是,忽略此事件;
○ 当触发onmouseout事件时,判断鼠标进入的元素是否是当前元素的内部元素,如果是,忽略此事件;
这样,内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。

转载自:https://www.cnblogs.com/xueandsi/p/5953123.html

你可能感兴趣的:(web前端)