jQueryでクリックイベント中にキーが押されたかどうかを確認するにはどうすればよいですか?


105

jQueryでクリックイベントをキャッチし、キーが同時に押されたかどうかを確認できるようにして、keypressイベントに基づいてコールバック関数内でフォークできるようにします。

例えば:

$("button").click(function() {
    if([KEYPRESSED WHILE CLICKED]) {
        // Do something...
    } else {
        // Do something different...
    }
});

これはまったく可能ですか、それとも可能であればどのように行うことができますか?

回答:


174

イベントのプロパティから、Shiftキー、Altキー、およびControlキーを簡単に検出できます。

$("button").click(function(evt) {
  if (evt.ctrlKey)
    alert('Ctrl down');
  if (evt.altKey)
    alert('Alt down');
  // ...
});

その他のプロパティについては、quirksmodeを参照してください。他のキーを検出する場合は、cletusの回答を参照してください。


3
jQueryイベントオブジェクトにそのプロパティが表示されない:api.jquery.com/category/events/event-object
cletus

1
まあ、ページが言うように、「元のイベントのほとんどのプロパティは新しいイベントオブジェクトにコピーされ、正規化されます。」ctrlKey、altKeyなどはecmascript標準(前述のjquery apiページの最初のリンクを参照)の一部であるため、(少なくとも適切なブラウザでは)イベントオブジェクトには通常、これらのプロパティも設定されています。
kkyy

3
Quirksモードは、これらがキーイベントで定義さているとだけ言います。マウスイベントについての言及はありません。

6
を使用して、Mac OS Xのコマンドキーを検出することもできますif (e.metaKey) alert('Command down')。JS unixpapa.com/js/key.htmlの
F Lekschas

48

keydown()およびを使用して、キーのステータスを個別に追跡する必要がありますkeyup()

var ctrlPressed = false;
$(window).keydown(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = true;
  }
}).keyup(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = false;
  }
});

キーコードリストをご覧ください。これで確認できます:

$("button").click(function() {
  if (ctrlPressed) {
    // do something
  } else {
    // do something else
  }
});

6
この方法の1つの欠点(私がより良い方法を知っているわけではありません)は、ALTキーを検出していて、ユーザーが別のウィンドウにALT-Tabを押している場合、別のアプリケーションで発生したため、キーアップイベントはブラウザーによって検出されません。その時点から、jqueryは、jqueryアプリ内でキーアップするまで、キーがダウンしていると見なします。これは、私が想像できる限り、ALTキーでのみ問題になります。
Flat Cat

1
Cmd-TabのMac OS Xの場合、ただし、プリンシパルはまだ保持されていると思います
murftown

1
またはCtrl +タブブラウザのタブを変更する
Seeven


3

@Arun Prasadのthunderを盗むことなく、デフォルトのアクションを停止するために再ハッシュした純粋なJSスニペットは次のとおりです。

function Show(event) 
{
  if (event.ctrlKey) 
  {
    alert('Ctrl held down which clicked');
  } 
  else 
  {
    alert('Ctrl NOT pressed');
  }
  return false
}
<p>Hold down CTL on the link to get a different message</p>

<a href="" onclick="return Show(event)">click me</a>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.