0

複雑なナビゲーション UI にとって重要な機能があるため、キーボードでアクセスできるようにしたいと考えています。クリックとフォーカスの両方を使用してハンドラーを作成しています。

$('.mycoolnavbutton').on("click focus", function() {
   // do an animated reveal
});

ここに落とし穴があります: 書かれているように、クリック イベントがフォーカス イベントをトリガーするため、Firefox で二重実行 (および不安定な動作) が発生します。すべて (および console.logs) が 2 回実行されます。(Webkit は 1 回だけ実行されます。)

クリックハンドラーをフォーカスに「パイプ」するだけでよいことに気づきました。

$('.mycoolnavbutton').on("click", function(event) {
   event.preventDefault();
   this.focus();
});
$('.mycoolnavbutton').on("focus", function() {
   // do an animated reveal
});

しかし、それは本当に奇妙でエラーが発生しやすいようです。このジレンマに遭遇したのは私が初めてではないと確信しています。標準的な解決策は何ですか？

4

1 に答える 1

0

まず、キーボード フォーカスを取得したときにボタンを起動する理由をお尋ねします。ボタンは通常、フォーカスを取得した後にスペースバーまたはリターン キーを押すことによってキーボードでトリガーされ、フォーカスを取得しただけでは起動されません。

次に、これら 2 つのイベントは完全に分離されており、一方が他方につながるかどうかを知る方法がないため、イベントを 1 回だけ起動する方法について次の可能性を考えることができます。

  1. これらのイベントのいずれかを処理するときは、イベントを処理した時間を記録する状態を設定し、その時間の xx ミリ秒以内に他のトリガーを無視します。

  2. または、同じことを達成するわずかに異なる方法。イベントを起動するときは、setTimeout を実行し、タイマーが起動するまでイベントを再度処理しないようにして、短時間に 2 回起動しないようにします。

于 2012-09-19T06:41:12.763 に答える