0

私の要件は、ポップアップにカーソルを合わせてフォーム上で何かを選択すると、ポップアップが表示されたままになることです。

ポップアップが移動ホバーを失った場合、非表示にする必要があります

以下のコードですべてがうまく機能します。しかし、選択ボックスでオプションを選択しようとすると (ポップアップからドロップダウンするオプション)、ポップアップが非表示になります。

JSFIDDLE リンクhttp://jsfiddle.net/LNGz6/5/を次に示します。この問題はInternet Explorerでのみ発生します。

ここにコードがあります

<div id="popup">
 <div class="label"> Search </div>
  <div class="control"> 
      <select name="searchval">
         <option value="entries">Entries</option> 
         <option value="bookings1">bookings1</option>
         <option value="bookings2">bookings2</option>
         <option value="bookings3">bookings3</option>
         <option value="bookings4">bookings4</option>
         <option value="bookings5">bookings5</option>
         <option value="bookings6">bookings6</option>
      </select>
   </div>
</div>

Jquery 関数

$("#popup").hover(function(){
   //do none
},function(){
   $(this).hide();
});
4

2 に答える 2

1

イベントがDOMツリーをバブルアップし、潜在的な親イベントハンドラーをトリガーするため、この動作が発生します。これを解決するには、次の2つのオプションがあります。

1）要素にイベントハンドラーを追加しselect、イベントバブリングを停止します。

$("select[name=searchval]").hover(function(e){
    e.stopPropagation();
});

2）イベントターゲットを確認し、それに応じて非表示にならないようにします。

$("#popup").hover(function(){
   //do none
},function(e){
   if (e.target == this){
      $(this).hide();
   }
});

後者の例（非表示は赤い部分でのみトリガーされます）では、divが子要素とオーバーラップしていません。

于 2012-08-10T12:08:16.467 に答える
0

私がすることは、フォーカスが入力要素にあるかどうかを確認することです:

$("#popup").hover(function() {
    //do none
}, function() {
    var $sel = $('select');
    if ($sel.is(":focus")) {
        console.log('do not hide');
        $sel.blur();
    } else {
        $(this).hide();
    }
});​

例はこちら。

オプションを選択しても、ポップアップは非表示になりません。blurオプションを選択した後もフォーカスがそこに残り、マウスをホバーしてボックスから出てもポップアップが非表示にならないため、select 要素のメソッドが必要です。前の他の要素。問題は、選択したものがポップアップ内にあるオプションである場合に発生します。フォーカスは選択に残り、別の場所をクリックする必要があります。これは私が今持っているものです:\

最後に、選択要素の選択方法が最適ではありません。この場合は機能しますが、html に他の select 要素がある場合、競合が発生します。そのため、ID またはクラスをタグに追加し、セレクターを変更して、その要素のみに影響するようにします。

于 2012-08-10T11:52:29.003 に答える