jQueryでマウス・クリック時にShiftキーが押されているか判断する

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

Shift+クリックなど、マウスのクリック時に同時に押されているキーを調べる(Shiftキー, Ctlキー, Altキーなど)

クリック時の処理(関数)に、イベント・ハンドラ(オブジェクト)を渡し、そのプロパティ値を見て判断します。

下記は”idClickArea”のIDを持つ要素をクリックした時に、シフト・キーが同時に押されているかチェックして、アラートを表示するサンプルです。

$(function(){
$('#idClickArea').click(function(event){
if (event.shiftKey){
alert('SHIFTも同時に押されました');
}
}
});

応用技としてCtrl+Shiftを押しながらクリックした場合の判断も出来ます。

$(function(){
$('#idClickArea').click(function(event){
if (event.shiftKey){
if (event.ctrlKey){
alert('CTRLとSHIFTも同時に押されました');
}
}
}
});
※上記以外のプロパティは下記一覧を参照

マウス・クリック時のイベントが持つプロパティ一覧

※大文字・小文字を識別するので注意

プロパティ
event.type クリック時のイベントなので”click”が返ってきます
event.ctrlKey Controlキーが押されているとTRUE
event.shiftKey Shiftキーが押されているとTRUE
event.altKey Altキーが押されているとTRUE
event.pageX クリック時のマウス(ポインター)のウィンドウ内のX座標
event.pageY クリック時のマウス(ポインター)のウィンドウ内のY座標
event.screenX クリック時のマウス(ポインター)の画面内のX座標
event.screenY クリック時のマウス(ポインター)の画面内のY座標
event.metaKey Macの場合でCommandキーが押されているとTRUE, Windowsの場合、Ctrlキー
event.target クリック時にクリックされたエレメントが返されます。
例) value = event.target.innerHTML;
event.timeStamp イベントが作成されてからクリックされるまでの経過時間(ミリ秒)

■参考文献

関連記事

PHPでComet:フォーカスの当たっていないウィンドウが更新されない... PHPとprototype.jsを使ってAjaxでCometなチャットを作ろうとした。 FireFoxで動作検証していたのだが、ブラウザの複数ウィンドウを立ち上げ、別マシンでもウィンドウを立ち上げて検証していたところ、フォーカスの当たっていない(アクティブでない)ウィンドウでは、TextAre...
Google SitesのGoogle GadgetにjQueryを使う簡単な方法... Google Sitesでガジェットの開発をする際に、Javascriptを使い始めると、やはりjQueryも使いたいと感じる事が多いと思います。 色々な方法はありますが、簡単と感じる(3ステップで追加できる)方法を記載します。 ※追記:Google Apps Scriptがスタンダード版A...
jQueryの”.getJSON”で”200 OK”のレスポンスにデータがない... Google Gadgetで、jQueryの".getJSON"メソッドを使って別ドメインから(クロスドメインで)、JSONデータが受け取れない際に注意すること。 HTTPリクエスト・ヘッダに"Origin"が渡されていたら、レスポンス・ヘッダに"Access-Control-Allow-...
jQueryと外部JavaScriptでGoogleGadgetを作る 以前、3ステップでGoogleGadgetでjQueryを使う方法の記事を書いたのですが、より簡単かつ大胆に使えて外部JavascriptがダイナミックロードなGoogleガジェットを作りました。外部ファイルが別ドメイン(クロスドメイン)間でも動作します。 よろしかったら使ってください。 ■...

スポンサーリンク
レクタングル(大)広告

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク
レクタングル(大)広告