3

ページにテキスト入力があります。フォーカスを受け取ると、その下に選択ボックスが表示されます。フォーカスを失ったら、フォーカスがセレクト ボックスに移動していない限り、セレクト ボックスを非表示にします。単純に聞こえますが、問題が発生しました。

そのようにイベントハンドラーを設定しました（coffeescriptを使用）

jQuery ->
  $('td.description input').focus -> showItemSelector()
  $('td.description input').blur -> hideItemSelector()

showItemSelector()そして、hideItemSelector()そのように定義されています

showItemSelector () ->
  $('#item-selector').show()

hideItemSelector () ->
  unless $('#item-selector select').is(':focus')
    $('#item-selector').hide()

しかし、うまくいきません。入力がフォーカスを失うと、項目セレクターは常に非表示になります。私はいくつかの実験を行い、私の疑いが確認されました。関数は、hideItemSelectorフォーカスが新しい要素に移動する前に実行されています (これはある程度の意味があります。ブラウザーは、次の要素にフォーカスを割り当てる前に、おそらく最初の要素からフォーカスを取得し、関数をトリガーします)。次のコードは、これを示しています。

hideItemSelector = () ->
    focus = -> console.log $('select#category').is(':focus')
    focus()
    setTimeout focus, 1000

これにより、コンソールで false が返され、次に true が返されます。遅延により、ブラウザーはフォーカスを移動する時間が与えられます。

私の質問は、setTimeout を使用せずにやりたいことを行うにはどうすればよいですか? 他に何も機能しない場合は、これを行う必要がありますが、これは欠陥のあるアプローチのようです。

4

1 に答える 1

0

これは、グローバル変数を割り当て、ユーザーがオブジェクトに移動したりオブジェクトから移動したりするときにその値をからtrueに変更することで実現できます。次に例を示します。false

$('#yourElement').mouseenter(function() {
  isHovered = true;
}).mouseleave(function() {
   isHovered = false;
 });

Internet Explorerを除くすべてのブラウザーで機能する方法もありますが、無効な疑似セレクターを使用しているため、使用することはお勧めしません。

if ($('#hello').is(':hover')) {
      alert('hello');
 }

それ以外は、そのためのプラグインを見つける必要があります。これがSpYk3HHによる自作のプラグインで、ここにあります：jsFiddle isHoverPluginDemo。また、読むことをお勧めします：マウスがjQueryの要素の上にあるかどうかを確認するにはどうすればよいですか？。役に立つと思います。

于 2012-08-25T11:12:04.997 に答える