跨浏览器的mouseentermouseleave以及compareDocumentPosition的使用说明_javascript技巧

//这里初始化标识的值 如果同时具备n种状态 则 每种状态的值一定是 000001 000010 000100 001000 010000 100000
},
setStatus: function(sFlags) { //sFlags "状态1,状态3......设置当前状态
sFlags = sFlags.split(',');

　　　　this._status=0;
for (var i = 0, len = sFlags.length; i this._check[sFlags[i]];
this._status |= this._flags[sFlags[i]];
}
},
addStatus: function(sFlags) {//sFlags "状态1,状态3......检查当前状态标示 是否有 状态1和状态3 如果没有则添加
sFlags = sFlags.split(',');
for (var i = 0, len = sFlags.length; i this._check(sFlags[i]);
if (this.hasStatus(sFlags[i])) continue; //判断是否已经有这个状态如果有 跳过.
this._status |= this._flags[sFlags[i]];

//当前的状态值 与 允许的标识值 做 | 运算 即添加状态
}
},
removeStatus: function(sFlags) {
sFlags = sFlags.split(',');
for (var i = 0, len = sFlags.length; i this._check(sFlags[i]);
if (!this.hasStatus(sFlags[i])) continue;
this._status ^= this._flags[sFlags[i]];

// 当前状态值 与 要去掉的状态值做 ^运算 即删除状态
}
},
clear: function() {
this._status = 0;
},
hasStatus: function(sFlags) {//sFlags "状态1,状态3.....状态 n.检查当前状态标识 是否同时 具备状态1和状态3 以及状态n
sFlags = sFlags.split(',');
for (var i = 0, len = sFlags.length; i this._check(sFlags[i]);
if ((this._status & this._flags[sFlags[i]]) != this._flags[sFlags[i]]) return false;

//当前状态值 与输入的状态做 & 运算 如果返回值 不等于 改状态 的标识值 则 return false .

//比如 010101 & 010000 返回010000则 说明当前标识值具备 010000这个状态.

}
return true;
},
_check: function(sFlag) {
if (!sFlag in this._flags) throw new Error(" 当前 flag 中不存在" + sFlag + "标识");

//检查当前输入状态字符串 是否是合法值.
}
}

用法:

var fileStatus=new flag('readOnly,hidden,otherStatus');

fileStatus.setStatus('readOnly,hidden');

alert(fileStatus.hasStatus('readOnly'))//true;

alert(fileStatus.hasStatus('hidden'))//true;

alert(fileStatus.hasStatus('otherStatus'))//false;

最后 我们回到正题 我们借助 compareDocumentPosition 来模拟 mouseenter mouseleave

DOM结构:

js脚本:

var dd = document.getElementById('dd')

if (! +'\v1') {//ie
dd.Onmouseenter= function() { alert(1); };
dd.Onmouseleave= function() { alert(2); };
}
else {//others
dd.Onmouseover= function(e) {
var t = e.relatedTarget;
var t2 = e.target;
this == t2 && t && !(t.compareDocumentPosition(this) & 8) && alert(1);
};
dd.Onmouseout= function(e) {
var t = e.relatedTarget;
var t2 = e.target;
this == t2 && t && !(t.compareDocumentPosition(this) & 8) && alert(2);
};
}

大功告成!!!!!