5

重複の可能性:
Javascript: 複数のマウスアウト イベントがトリガーされた

マウスがコンテナから出たときに、コンテナ内に含まれる要素にカーソルを合わせるとイベントが発生するという問題が発生し続けています。jQuery が関数でこの問題を解決したことは知ってい.hoverますが、単一の問題を解決するためにライブラリ全体を使用したくありません。JavaScriptでこれを行うにはどうすればよいですか?

私の質問はこの質問に似ていますが、jQuery を使用していません。

4

1 に答える 1

5

Felix は、最初のリンクで正しい答えを見つけました。記事から引用すると...

もう 1 つの問題は、マウスをレイヤーに移動してからリンクに移動すると、ブラウザーがレイヤーに mouseout イベントを登録することです。私にはあまり意味がありません (マウスはまだレイヤーにあります) が、すべてのブラウザーがこれに同意しています。

では、マウスが実際にレイヤーを離れたときに発生しないマウスアウトを拒否するにはどうすればよいでしょうか?

function doSomething(e) {
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV') return;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
    reltg= reltg.parentNode
if (reltg== tg) return;
// Mouseout took place when mouse actually left layer
// Handle event
}

最初にイベントターゲットを取得します。マウスが移動した要素。ターゲットが DIV (レイヤー) でない場合は、マウスが確実にレイヤーを離れていないため、すぐに関数を終了します。

ターゲットがレイヤーの場合、マウスがレイヤーを離れたのか、レイヤー内のリンクに入ったのかはまだわかりません。したがって、イベントの relatedTarget/toElement をチェックします。マウスが移動した要素。

この要素を読み上げてから、イベントのターゲット (つまり DIV) または body 要素に遭遇するまで、DOM ツリーを上に移動します。

ターゲットに遭遇すると、マウスはレイヤーの子要素に向かって移動するため、マウスは実際にはレイヤーを離れていません。機能を停止します。

関数がこれらすべてのチェックに合格すると、マウスが実際にレイヤーを離れたことを確認し、適切なアクション (通常はレイヤーを非表示にする) を実行できます。

于 2013-01-02T21:26:38.890 に答える