javascriptの中のonmouse事件はdivの中で故障の問題の解決方法になります.
2679 ワード
つまり、対象の子に移ったのは、onmousoutということになります.しかし、これは私たちが望む効果にはよく及ばないです.これはJavascript自身の泡立ち特性によるものである(すなわち、サブ要素にイベントをトリガし、親要素-スタックの後に先にアルゴリズムを出すまで泡立てる).今日はインターネットで検索して、以下の解決方法(IEとFirefox対応)を探しました.
IEの下で問題を解決するのは簡単です.OuseOver、onMouseOutの代わりにonMouse Enter、onmouse Leaveを使えばいいです.彼らの役割は基本的に同じですが、前者は泡が発生しません.しかし、firefoxの下には、OnMouse Enter、one Mouse Leaveという二つの事件がありません.それでは、IEとFirefoxの互換性の問題は純粋なjsを使って解決するしかないです.
原理:one MouseOutイベントをトリガしたと判断した場合、マウスが到達した要素は親要素情報欄(div)に含まれていますか?いいえ、マウスが本当にメッセージバー(div)を移動したという意味であれば、メッセージバーは非表示になります.
IEの下で問題を解決するのは簡単です.OuseOver、onMouseOutの代わりにonMouse Enter、onmouse Leaveを使えばいいです.彼らの役割は基本的に同じですが、前者は泡が発生しません.しかし、firefoxの下には、OnMouse Enter、one Mouse Leaveという二つの事件がありません.それでは、IEとFirefoxの互換性の問題は純粋なjsを使って解決するしかないです.
原理:one MouseOutイベントをトリガしたと判断した場合、マウスが到達した要素は親要素情報欄(div)に含まれていますか?いいえ、マウスが本当にメッセージバー(div)を移動したという意味であれば、メッセージバーは非表示になります.
// onMouseOut ，IE event toElement ，firefox event relatedTarget 。
IE：event.toElement ，Firefox：event.relatedTarget（ ：Firefox event ， IE event window.event )
// ① div （IE obj.contains(element) ， Firefox ， firefox obj.contains() ）。
：
if(typeof(HTMLElement)!="undefined") // firefox contains() ，IE
{
HTMLElement.prototype.contains=function(obj) {
while(obj!=null&&typeof(obj.tagName)!="undefind") { // obj
if(obj==this) { return true; }
obj=obj.parentNode;
}
return false;
};
}
// ② ， IE Firefox ， navigator.userAgent ：
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE";
}
if(navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}
// ③ ， onMouseOut ， ， (div) ， ， onMouseOut ， ， ， ：
function hideMsgBox(theEvent){ //theEvent ，Firefox
if (theEvent){
var browser=navigator.userAgent; //
if (browser.indexOf("Firefox")>0){ // Firefox
if (document.getElementById('MsgBox').contains(theEvent.relatedTarget)) {//
return; //
}
}
if (browser.indexOf("MSIE")>0){ // IE
if (document.getElementById('MsgBox').contains(event.toElement)) { //
return; //
}
}
}
/* （ ： ）*/
document.getElementById('MsgBox').style.display='none' ;
……
}
// ④ (Div) onMouseOut=hideMsgBox(event) 。