3

ここに画像の説明を入力

上記のように、クリックするとサブメニューが開くボタンがあります。サブメニューの各オプションには 3 つの要素があります (実際にはもっとあると思いますが、簡単にするために 3 つとしておきます)。サブメニューのメイン div (白い「フレーム」) にフォーカスを当てます。この div の Onblur - サブメニューを非表示にします。

これはすべて期待どおりに動作します-しかし、特定のオプションの3つの要素の1つがクリックされると(つまり、フォーカスが与えられると)、メインのdivがonblurイベントハンドラーのために閉じられるという問題があります-およびにリンクされているPopUp関数サブメニューのオプションの要素の onClick イベントが発生/到達しません。

オプションがクリックされていない場合、この方法でメイン div の onblur イベントのみを処理する必要があります。

私は明らかに使用するJQueryを持っているので、問題を解決するためにそれを使って喜んでいます。

4

2 に答える 2

3

私はこの回答を投稿するつもりです - 誰かがそれを改善したり、代替案を提案したりできることを願っています.

しかし、私がやったことはonblurイベントです-divを即座に非表示にする代わりに、タイムアウトを使用して小さな遅延を入れたので、発生したonblur/onclickイベントの優先順位を変更しませんが、実際にはonclick 'チャンス' を起動します。

于 2012-05-25T14:10:05.413 に答える
2

次のアイデアを試すことができます: (テストされていないため、チューニング/デバッグが必要になります..)

function mouseOverSubMenu(mouseX, mouseY) {
    var divTop = $('.sub_menu').offset().top;
    var divLeft = $('.sub_menu').offset().left;
    var divRight = divLeft + $('.sub_menu').width();
    var divBottom = divTop + $('.sub_menu').height();


    return (mouseX >= divLeft && 
            mouseX < divRight &&
              mouseY >= divTop &&
              mouseY < divBottom);
}


$('.sub_menu, .other_elements').hover(
    function(e) {
        if (mouseOverStartButton(e.pageX, e.pageY)) {
            // show menu
        }
    },
    function(e) {
        if (!mouseOverStartButton(e.pageX, e.pageY)) {  
            //hide menu
        }
    }
);
于 2012-05-25T14:05:37.020 に答える