jQuery：マウスが複数の要素を離れるときに検出します

StackOverflow https://stackoverflow.com/questions/4787598

質問

私はdivで作られたメニューを持っています、そして、divの1つには、ドロップダウンをスライドするjqueryマウスエンター関数があります。

$(".dropdownLauncher").mouseenter(function() {
  $(".dropdown").slideDown("slow");
});

また、マウスのドロップダウンバックアップをスライドさせる関数があります。ドロップダウンを残します。

$(".dropdown").mouseleave(function() {
  $(".dropdown").slideUp("slow");
});

これは、ユーザーがランチャーの上にマウスを移動したときに、ドロップダウンを通過せずに再び外に出る場合を除いて、メニューが停止したことを除いて、これで問題ありません。

マウスがDIVのいずれかにあるかどうかを確認することは可能ですか？

編集1：マークアップ：

<div class="menu">
                <div class="menuItem selectedItem">Home</div>
                <div class="menuItem unselectedItem leftBorder dropdownLauncher">About <img src="Arrow.gif"></div>
                <div class="dropdown">
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                </div>
                <div class="menuItem unselectedItem leftBorder">Visiting</div>
                <div class="menuItem unselectedItem leftBorder">Newsletters</div>
                <div class="menuItem unselectedItem leftBorder">Ecology</div>
            </div>
役に立ちましたか？

解決

まあ、この方法は非常にバギーです...任意のメニュー（ブラウザメニューなど）を開き、マウスを移動します - 隠されていません。これは通常の方法です。どこかをクリックすると、メニューが非表示になります（クリックイベントハンドラーを添付してドキュメントできます）。 Submenuに行っても、マウスがその上にあるときに表示され、マウスを別のメニュー項目に移動すると隠されています。しかし、マウスをメニューから移動すると、Submenuは隠されていません。

それでもアイデアを実装したい場合は、ユーザーアクションを制御する複雑なシステムを実装する必要があります。 Mouseleave Handlerを追加してDropdownlauncherに追加し、そのユーザーがこのアイテムを残したままにして、ドロップダウンメニューを隠します。ここで、ドロップダウンメニューを隠す機能では、マウスがオーバードロップダウンメニューであるかどうかを確認します - 隠れをキャンセルします。それ以外の場合はそれを非表示にします。その変数の状態をきれいにすることを忘れないでください（「左ドロップダウンルンチャー」）。たとえば、ユーザーが左ラインカーを去った後、ドロップダウンメニューを1秒で非表示にすることができます。

また、ユーザーがマウスを非常に高速に移動する場合（ジャックのみ）、ブラウザにはいくつかのイベントをトリガーする時間がありません（Mousemoveで問題がありました）...このケースをテストしてください。

まあ、コードは添付されていませんが、あなたがアイデアを得ることを願っています。

アップデート： おそらくあなたはもうこの質問に興味がないでしょう（答えはとても遅くなるので、私は理解しています;）、私は非常に興味深い解決策を見つけました。

例]ページをクリックします

そのページを開き、メニューがあります。私がそれを手に入れたとき、これはあなたが実装したいものです（私はメニューナビゲーションと同じ動作を意味します）。 JavaScriptコードを見た後、私はそれが非常に小さいことに気づきました、そしてさらにそれはそのメニューとは関係がありません...だから私には明らかでした、彼らはそれを実行するために純粋なHTML+CSSを使用します。小さいものを見てください CSSファイル, 、また、見て、メニューHTMLマークアップ：

<div id="rootMenu" class="menustyle">
  <ul class="menubar">
      <li class="topitem">
        <a class="selected" href="_link_"><img border="0" src="/click-examples/assets/images/home.png" alt=" Home" class="link"> Home</a>
        <ul class="submenu">
           <li>
              <a title="BorderPage Java source" target="_blank" href="_link_">BorderPage Class</a>
           </li>
           <li>
              <a title="Page border HTML template" target="_blank" href="_link_">Border Template HTML</a>
            </li>
            ....
        </ul>
      </li>
      ....
   </ul>
   ....
</div>

他のすべてはCSSによって行われます（特に：Hover Pseudoクラス）。私はそのアプローチが好きでした。だから今、あなたは少なくとも代替手段を持っています;）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top