javascript - Javascript MouseOver / MouseOut 子イベント

Question

いくつかの子要素を持つ要素があります。マウスが親要素を離れると、親とその子を非表示にしたい。私が抱えている問題は、子供の上にマウスを置くと、マウスアウトイベントが発生することです。これを防ぐ最善の方法は何ですか？マウスが親またはその子の中にない場合にのみ、イベントを発生させたいと思っています。

score 3 · Accepted Answer

イベントは、子から親 (キャッチされている場所) にバブリングしています。

リスナーを追加し、そこで伝播を停止させることで、子でイベントをキャッチする必要があります。

このコードは、イベントが親ハンドラーにバブリングするのを防ぎます

function onMouseLeave(e)
{
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

質問: マウスオフイベントが、発生してはならないときに、親によって発生します。子の上にマウスを置いても、親からマウスが離されてはなりません。どうすればこれを止めることができますか?

score 3 · Accepted Answer

親要素にアタッチされたマウスアウトハンドラーのみが必要です。しかし...

子の 1 つから発生するイベントではなく、親が実際に mouseout イベントのターゲットであることを確認する必要があります。event.target (W3C) と event.srcElement (IE) を確認してください。

また、マウスが入力する要素が親の子孫ではないことも確認する必要があります。event.relatedTarget (W3C) と event.toElement (IE) を確認してください。

score 1 · Accepted Answer

mouseoverポインターが子要素に移動したときにもmouseenter発生しますが、ポインターがバインドされた要素に移動したときにのみ発生します。

mouseoutvsも同様ですmouseleave

3 に答える 3