jQueryでマウス・クリック時にShiftキーが押されているか判断する
Shift+クリックなど、マウスのクリック時に同時に押されているキーを調べる(Shiftキー, Ctlキー, Altキーなど)
この記事は次のブログに引っ越しました。
■Shift+クリックなど、マウスのクリック時に同時に押されているキーを調べる(Shiftキー, Ctlキー, Altキーなど) 01:28 Shift+クリックなど、マウスのクリック時に同時に押されているキーを調べる(Shiftキー, Ctlキー, Altキーなど)を含むブックマーク CommentsAdd Star クリック時の処理(関数)に、イベント・ハンドラ(オブジェクト)を渡し、そのプロパティ値を見て判断します。 下記は"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 イベントが作成されてからクリックされるまでの経過時間(ミリ秒) ■参考文献 Events Handling(tutorialspoint.com) Event Object - jQuery API(jQuery.com) jQuery Extended Click Events(jQuery.com) jQuery を扱う: 第 1 回 中級レベルの jQuery: プラグインを使用して jQuery 関数を作成および拡張する(ibm.com)
