几个对象及方法,分别如下:
1、事件对象;
2、事件对象相关属性(只针对onmouseover及onmouseout),即fromElement、toElement、relatedTarget;
3、判断一个元素是否包含另一个元素的方法,即element.contains(Node)与element.compareDocumentPosition(Node)
/*
* 功能:鼠标移入对象触发事件,兼容所有浏览器并防止鼠标在父子对象间移动造成的触发onmouseover的bug
* 参数:第一个参数表示触发的对象,第二个参数表示触发的对象的事件对象,第三个对象表示要执行的函数
*/
function mouseover(a, e, func) {
e = e || window.event;
var b = e.fromElement || e.relatedTarget;
mouseoverAndOut(a, b, func);
}
/*
* 功能:鼠标移出对象触发事件,兼容所有浏览器并防止鼠标在父子对象间移动造成的onmouseout的bug
* 参数:第一个参数表示触发的对象,第二个参数表示触发的对象的事件对象,第三个对象表示要执行的函数
*/
function mouseout(a ,e, func) {
e = e || window.event;
var b = e.toElement || e.relatedTarget;
mouseoverAndOut(a, b, func);
}
/*
* 功能:鼠标移入或移出对象触发事件,兼容所有浏览器并防止鼠标在父子对象间移动造成的onmouseover & onmouseout的bug
* 参数:第一个参数表示触发的对象,第二个参数表示触发的对象的事件对象,第三个对象表示要执行的函数
*/
function mouseoverOrOut(a, e, func) {
e = e || window.event;
var b;
if (e.type == 'mouseover') {
b = e.fromElement || e.relatedTarget;
} else if (e.type == 'mouseout') {
b = e.toElement || e.relatedTarget;
}
mouseoverAndOut(a, e, func);
}
/*
* 功能:鼠标移入或移出对象触发事件,兼容所有浏览器并防止鼠标在父子对象间移动造成的onmouseover & onmouseout的bug
* 参数:第一个参数表示触发的对象,第二个参数表示触发的对象的相关对象,第三个对象表示要执行的函数
*/
function mouseoverAndOut(a, b, func) {
if (document.all) {
if (!(a.contains(b))) {
func();
}
} else {
var res = a.compareDocumentPosition(b);
if(!(res == 20 || res == 0)){
func();
}
}
}