6

「mouseleave」イベントをバインドすることで非表示になるメニューのようなドロップダウンコンテナがあります。

<div id="container">
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
</div>

私が抱えている問題は、コンテナの子要素にSELECTオブジェクトが含まれていて、SELECTのOPTIONSがコンテナの境界の外側に物理的に拡張されている場合です。その結果、境界の外側のOPTIONSにカーソルを合わせると、「mouseleave」イベントがトリガーされ、ドロップダウンが起動して閉じます。SELECTはコンテナの子であるため、この場合、mouseleaveイベントがこれを認識することを期待します。

4

5 に答える 5

4

これに対する非常に単純で効果的な解決策は、アクションを実行する前にマウスポインタの座標を制御することです。コンテナがフォーカスから外れて要素「select」にフォーカスしている場合、ポインタをチェックします。ポインタがコンテナ内にある場合、アクションは実行されませんが、これがコンテナ要素の場合、アクションが実行されます。

 $('#div_solapa_lateral').bind("mouseenter",function(){
            $(this).animate({left:'0'},500);
        });

    $('#div_solapa_lateral').bind("mouseleave",function(e){
            if ( e.clientX>360 || e.clientY<60 || e.pageY>625 )
            $(this).animate({left:'-320'},500);
        });

clientXおよびclientYから" position:relative;"pageXおよびpageYから" position:absolute;"

于 2012-10-31T23:01:59.797 に答える
4

Firefoxで正しく動作しないため、Blockaのソリューションの更新：

if ((typeof e.fromElement != 'undefined' && !e.fromElement.length) ||
    (typeof e.fromElement == 'undefined' && e.target.tagName != 'SELECT')) {
    // perform your mouseleave logic
}
于 2011-08-16T13:29:10.330 に答える
2

まぶたさをありがとう！昨夜、あなたが投稿したものと非常によく似た、この問題に対する別の答えを実際に見つけました。

.bind("mouseleave", function(e) { // ANSWER HERE!!!
    if (!e.fromElement.length) {
        _state.filterTrigger.data("open", false);
        setTimeout(function() { _toggleFilter(_state.filterTrigger); }, 2000);
    }
});

e.fromElementオブジェクトは、SELECT内のOPTIONオブジェクトの数を示します。このオブジェクトは、他のHTMLタグでは未定義です。私はあなたの解決策を試していませんが、これは私にもうまくいきます。

于 2010-01-20T16:37:35.393 に答える
1

おそらく、ドロップダウンが展開されたときに、フラグを設定できます。アイテムが選択されたときにフラグをクリアします。マウスリーブが発生した場合、フラグがクリアされていない限り、メニューを非表示にしないでください。

ただし、UIイベントをこの程度までハッキングすることには常に神経質になります。これは、ブラウザを完全に使用できない状態のままにしてしまう可能性があるためです。

于 2010-01-19T20:39:57.437 に答える
1

ほとんどのレンダラー（Geckoを除くすべて）は、開いた<select>メニューとそのオプションを、ページ上の要素としてではなく、別の「ウィンドウ」に実装します。<select>したがって、ページは、開いているメニューに対するユーザーの操作を必ずしも認識しているわけではありません。すべての主要なブラウザで目的の効果を達成できる可能性はほとんどありません...

編集：...しかし多分そう。これはSafariとFirefoxで機能します。現在IEでテストすることはできませんが、試してみてください。

var timer;
$('#container').mouseleave(function(e) {
    if($(e.target).parents('#container').length) {
        return;
    }
    timer = setTimeout(function() {
        $('#container select').blur();
    }, 50);
}).mouseenter(function(e) {
    if(timer) {
        clearTimeout(timer);
    }
});

編集2：実際には、 「ウィンドウ」が開いているとき、Safariはまったく起動しませんmouseleave（またはmouseout） 。<select>

于 2010-01-19T20:50:07.773 に答える