1

次のシナリオがあります。ラベルのマウスオーバー イベントで、div を表示します。div 内で選択を行うには、div を開いたままにする必要があります。ラベルの mouseout イベントで、div が消える必要があります。問題は、カーソルがラベルから div に移動すると、ラベルの mouseout イベントが発生し、そこに到達する前に div が閉じられることです。グローバルブール変数と呼ばれる変数がcanCloseあり、それを閉じるか開いたままにする必要がある場合に応じて、true または false に設定します。この目的のために、ラベルの mouseout イベントで div を閉じる機能を削除しました。以下はサンプルコードです。

EDIT アレックスも実行可能な解決策を提供しましたが、私は問題の回避策を見つけました。1.5 秒で実行される関数をmouseleave使用して、ラベルにもイベントを追加しました。setTimeoutこの時間は、ユーザーが開いている div にカーソルを合わせるのに十分な時間を与えるため、canClose再び false に設定されます。

$("#label").live("mouseover", function () {
        FRAMEWORK.RenderPopupCalendar();
    });

$("#label").live("mouseout", function () {
        setTimeout(function(){
            if(canClose){
                FRAMEWORK.RemovePopupCalendar();
            }
        },1500);
    });

    this.RenderPopupCalendar = function () {
        FRAMEWORK.RenderCalendarEvents();
        }
    };


    this.RenderCalendarEvents = function () {
        $(".popupCalendar").mouseenter(function () {
            canClose = false;
        });

        $(".popupCalendar").mouseleave(function () {               
            canClose = true;
            FRAMEWORK.RemovePopupCalendar();
        });
    }

    this.RemovePopupCalendar = function () {
        if (canClose) {
            if ($(".popupCalendar").is(":visible")) {
                $(".popupCalendar").remove();
            }
        }
    };

何か助けてください。

4

3 に答える 3

2

<label>and<div>を含むものでラップし、その<div>上ですべてのマウス/非表示イベントを実行します。

このフィドルの例をチェックしてください - http://jsfiddle.net/6MMW6/1

于 2012-08-29T14:03:10.967 に答える
0

あなたのpopupCalendarにクラスセレクターの代わりに明示的なIDを与えてください、例えば

<div id="popupCalendar">

.popupCalendarの代わりに#popupCalendarを使用して参照してください。

現在、remove（）は、DOMからdivを完全に削除するため、非常に大幅です。カレンダーをもう一度表示したい場合は、.hide（）するだけです。

しかし、ロジックは少し複雑すぎるようです。mouseenterでは.show（）を、mouseoutイベントでは.hide（）を実行しないのはなぜですか？

于 2012-08-29T13:51:43.120 に答える