JQuery / Javascript：IEホバーは選択ボックスオプションをカバーしていませんか？

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

  •  03-07-2019
  •  | 
  •  

質問

マウスオーバーでテキストボックスを広げ、マウスオフでテキストボックスを短くするためのこのスクリプトがあります。

私が抱えている問題は、Internet Explorerが選択ボックスのオプションの上にカーソルを置いているように見えないことです。

これは、IEで選択をクリックしてオプションをドロップダウンできることを意味しますが、選択しようとすると、オプションが消え、選択ボックス自体から移動するとすぐに選択ボックスのサイズが変更されます。

サンプルコード：

<script type='text/javascript'>
$(function() {
$('#TheSelect').hover(
    function(e){
        $('#TheText').val('OVER');
        $(this).width( 600 );
    },
    function(e){
        $('#TheText').val('OUT');
        $(this).width( 50 );
   }
);
});
</script>

そして：

<input type='text' id='TheText' /><br /><br />

<select id='TheSelect' style='width:50px;'>
    <option value='1'>One</option>
    <option value='2'>Two</option>
    <option value='3'>Three</option>
    <option value='42,693,748,756'>Forty-two billion, six-hundred and ninety-three million, seven-hundred-forty-some-odd..... </option>
    <option value='5'>Five</option>
    <option value='6'>Six</option>
    <option value='7'>Seven...</option>
</select>

IEの選択ボックスに回避策はありますか？本当に信頼できるものを誰かが推薦できるなら、jqueryの代替品も検討します。

ありがとう！

役に立ちましたか？

解決

IEは、select要素のドロップダウンビット部分を考慮していないようです。それは実行可能ですが、expandoプロパティとblur / focusイベントを少しずらして 'hide'効果を有効または無効にし、マウスが要素のドロップダウン部分に入ったときにキックを停止します。

これを試してみてください：

$(function() {
    var expand   = function(){ $(this).width(600) }
    var contract = function(){ if (!this.noHide) $(this).width(50) }
    var focus    = function(){ this.noHide = true }
    var blur     = function(){ this.noHide = false; contract.call(this) }
    $('#TheSelect')
        .hover(expand, contract)
        .focus(focus)
        .click(focus)
        .blur(blur)
        .change(blur)
});

（これがjQueryの使用方法ではない場合はおAびします。これまで使用したことがありません：））

他のヒント

この投稿はしばらく前からあるように見えますが、回避策に興味がある人がまだいることを願っています。私が取り組んでいる新しいサイトを構築中にこの問題が発生しました。その上には製品スライダーがあり、製品ごとにマウスを移動すると、製品に関する情報、購入オプションを選択するためのドロップダウン、および購入ボタンを含む大きな情報バブルがポップアップ表示されます。マウスが選択メニューの最初の表示領域を離れると（つまり、オプションを選択しようとすると）、バブル全体が消えることがすぐにわかりました。

答え（jQueryを開発した賢明な人々）は、すべてイベントバブリングについてでした。問題を解決する最も簡単な方法は一時的に「無効化」する必要があることを知っていました。ホバーのアウト状態。幸いなことに、jQueryにはイベントバブリング（それらを伝播と呼びます）を処理する機能が組み込まれています。

基本的に、約1行程度の新しいコードで、「onmouseleave」にメソッドを追加しました。ドロップダウンのイベント（選択リストのオプションの1つにマウスを重ねると、このイベントが確実にトリガーされるようです-他のいくつかのイベントを試しましたが、これはかなり安定しているようです）ドロップダウンから「onmouseleave」イベントについて聞くことができます。

それはそれでした！ソリューションは、私が期待していたよりもずっとエレガントでした。その後、マウスがバブルを離れると、ホバーのアウト状態が正常にトリガーされ、サイトはそのビジネスについて継続します。修正方法は次のとおりです（document.readyに配置します）：

$(document).ready(function(){
  $(".dropdownClassName select").mouseleave(function(event){
    event.stopPropagation();
  });
});

WorldWideWebの答えは完璧に機能しました。

わずかに異なる問題があり、フォームフィールドの包含アイテム（選択メニューを表示するためにホバーする）にホバー効果があり、IEユーザーがドロップダウンから選択できませんでした（値をリセットし続けました） 。ワールドワイドウェブの提案（選り抜きのIDを使用）とビオラを追加しました。

これが私がやったことです：

$(".containerClass").hover(function() {
    $(this).children("img").hide();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });
}, function() {
    $(this).children('img').show();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });

});

ホバーに基づいて非表示/表示されるフォームがありました。ユーザーが選択に焦点を合わせた場合、フォームは非表示になりました。次のようなもので問題を解決できました。

element.find('select').bind('mouseenter mouseleave',function(){
    //Prevent hover bubbling
    return false;
});

同じ問題があり、IE8でWorldWidewebbの答えは非常にうまく機能しました。 「select」を削除して、わずかな変更を加えました。セレクタから選択ボックスのクラスを含めたため、セレクタから。それを本当に簡単な修正にしました。

また、問題なくhoverIntent jqueryプラグインを使用するメニューに実装しました。 （干渉なし）。

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