選択ボックスを閉じるためのぼかしはクロームでは機能しませんか？

Question

ユーザーが選択ボックスをクリックすると、選択ボックスにイベントを発生させて行うオプションメニューを非表示にしたいとします。次のコードはfirefoxでは動作しますが、chromeでは動作しません。

<select id="myselect" name="city"> 
       <option value="default" id="first">Default value</option> 
      </select> 



     <script type="text/javascript"> 

      $('#myselect').click(function(){ 
       $(this).blur(); 

      }); 

     </script> 

クロムオプションメニューはそのままです。

Answer 1

は、ここに私の問題は、クラス「オプションは」選択ボックスのすべてのオプションを表す

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; 
     if(is_chrome) $(".option").hide(); 

のための私のハックです。

Answer 2

これはユーザーのモーダル状態に関係していると思われます（ただし、サポートするドキュメントが見つかりませんでした）。私は、ユーザーがオプションから選択を行うまで、イベントリスナーは無視されると考えています。これをサポートするために

、あなたは私たちが<select>のonchangeイベントにそれをフックするとき$(this).blur()火災が正確に予想されるようにすることを見ることができます。 http://jsfiddle.net/TkfPN/

単に<select>要素を無効にするには、はるかに良いでしょう。フォーカスの合った要素をぼかすことは、非常に悪いHCIであり、ユーザーにとっては不満です。

Answer 3

私はこれに対する解決策を見つけました。選択ボックスのノードを削除してから、それを元に戻してください！委任されたイベントハンドラを使用していることを確認してください。すべてのブラウザで動作するようです。ここにjQueryの私のソリューションがありますが、誰かが純粋なJSソリューションを書くことを望むなら、それも良いでしょう。

jQuery('.sortSelect').appendTo('.sortParent'); 

この例のマークアップは、sortSelectがsortParentの最後の直接の子である場合に機能します。 $ .insertAfter（）/ $。insertBefore（）も同様に動作します。