今天凤捷来为大家解答以上的问题。onmouseout一直触发,onmouseout相信很多小伙伴还不知道,现在让我们一起来看看吧!
1、在onmouseover时先进行如下判断,结果为true时再执行方法体: if(!this.contains(event.fromElement)){MouseOverFunc()} 在onmouseout时先进行如下判断,结果为true时再执行方法体: if(!this.contains(event.toElement)){MouseOutFunc()} 下面来解释一下上面两行代码的含义: 在IE中,所有的HTML元素都有一个contains方法,它的作用是判断当前元素内部是否包含指定的元素。
2、利用这个方法来判断外层元素的事件是不是因为内部元素而被触发,如果内部元素导致了不需要的事件被触发,那就忽略这个事件。
3、 event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素;event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。
4、 那么上面两行代码的含义就分别是: ○ 当触发onmouseover事件时,判断鼠标离开的元素是否是当前元素的内部元素,如果是,忽略此事件; ○ 当触发onmouseout事件时,判断鼠标进入的元素是否是当前元素的内部元素,如果是,忽略此事件; 这样,内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。
5、 但问题又来了,非IE的浏览器并不支持contains函数,不过既然已经知道了contains函数的作用,就可以自行添加如下的代码来为非IE浏览器增加contains支持: if(typeof(HTMLElement) != "undefined") { HTMLElement.prototype.contains = function(obj) { while(obj != null && typeof(obj.tagName) != "undefind") { if(obj == this) Return true; Obj = obj.parentNode; } return false; }; }。
今天为大家分享到这里,希望小伙伴们会有帮助。
标签: