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 イベントが作成されてからクリックされるまでの経過時間(ミリ秒)

■参考文献


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

シェアする

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