div_javascriptスキルでJavaScriptのonmouseイベントが失敗する問題の解決方法

つまり、オブジェクトのサブオブジェクトへの移動も onmouseout とみなされます。しかし、これでは私たちが望んでいる効果が得られないことがよくあります。これは、JavaScript 自体のバブリング特性によるものです (つまり、イベントが子要素でトリガーされ、親要素にバブリングします - スタック後入れ先出しアルゴリズム)。今日オンラインで検索したところ、次の解決策を見つけました（IEおよびFirefoxと互換性があります）。
IE で問題を解決するのは非常に簡単です。onMouseOver と onMouseOut の代わりに onMouseEnter と onMouseLeave を使用するだけです。これらの関数は基本的に同じですが、前者はバブルしません (jQuery のイベント イベントを使用する場合は、mouseleave と onMouseLeave をバインドするだけです)。マウス入力それだけです）。ただし、Firefox では onMouseEnter および onMouseLeave イベントはありません。その場合、IE と Firefox の互換性の問題を解決するには、純粋な JS を使用するだけです。
原則: onMouseOut イベントがトリガーされた後、マウスが到達した要素が親要素情報バー (div) に含まれるかどうかが判断されます。そうであれば、マウスが情報バー (div) 上にある場合は非表示にならないことを意味します。そうでない場合は、マウスが実際に情報バー (div) の外に出たことを意味し、情報バーは非表示になります。

コードをコピー コードは次のとおりです:

// まず、トリガーする要素を取得します。 onMouseOut イベント、IE Firefox では、イベントの toElement 属性を通じて取得されます。Firefox では、イベントの関連ターゲット属性を通じて取得されます。
IE:event.toElement、Firefox:event.popularTarget (注: Firefox のイベントは関数の呼び出し時に渡す必要がありますが、IE のイベントは window.event システム オブジェクトを通じて直接取得できます)
// ①次のステップは、取得した要素がメイン div の子要素であるかどうかを判断することです (IE では要素の obj.contains(element) メソッドで判断できますが、Firefox ではそのようなメソッドはありません)したがって、Firefox の要素の obj を定義する必要があります)。
コードは次のとおりです:
if(typeof(HTMLElement)!="unknown") // 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
}
// ②取得して判定した後IE と Firefox を判断して処理され、ブラウザの種類は navigator.userAgent によって判断されます:
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE" ";
}
if(navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}
// ③ ここまでの問題はすべて解決しました解決済み 解決済み この問題を解決するには、onMouseOut イベントがトリガーされたときに、まずマウスが到達した要素をさまざまなブラウザーで取得し、その要素が情報バー (div) 内にあるかどうかを判断します。子要素の場合、onMouseOut イベントは実行されません。逆も同様です。その後、イベントを実行して情報バーを非表示にします。完成したコードは次のとおりです。イベントでは、Firefox のメソッド
if (theEvent){
var browser=navigator .userAgent; //ブラウザのプロパティを取得します
if (browser.indexOf("Firefox")>0){ // is Firefox
if (document.getElementById('MsgBox').contains(theEvent.relationTarget)) {//子要素の場合
return; // 関数終了
}
}
if (browser.indexOf("MSIE")>0){ //IE の場合
if (document.getElementById('MsgBox').contains(event.toElement)) { //IE の場合子要素
return; //関数の終了
}
}
}
/*実行される操作 (非表示など)*/
document.getElementById('MsgBox ').style.display='none' ;
......
}
// ④ 情報バー(Div)にonMouseOut=hideMsgBox(event)を設定して呼び出します。


さらに、window.event.cancelBubble = true (IE)、event.stopPropagation()、event.preventDefault() (Firefox) を設定することで問題を解決できますが、すべての子を走査する必要があります。要素は効率に影響するため、onMouseOut イベントがトリガーされたときに上記の判断を行って個別に処理する方が適切です。