2012年12月13日木曜日

【javascript】mouse eventでShift/Alt/Ctrlを取得


Ctrl,Alt,Shiftを押しながらのマウスイベントを検知する方法
モダンブラウザではマウスイベントが発生したとき、ユーザがCtrl、Alt、Shiftキーを押しているかどうかを下記コードで検知することができます。

下記の例において、これはMouseDownとMouseUpの場合のコードです。
他のマウスイベントでも同様の方法で検知できるかも。ブラウザによってはできないかも?

Ctrl/Alt/Shiftを検知するために、eventプロパティのevent.ctrlKey、event.altKey、event.shiftKeyを使います。
→サンプル http://webportal.web.fc2.com/html5/detectshift/

サンプルコード

<script language="JavaScript">
<!--
function mouseDown(e) {
 var ctrlPressed=0;
 var altPressed=0;
 var shiftPressed=0;

 if (parseInt(navigator.appVersion)>3) {

  var evt = e ? e:window.event;

  if (document.layers && navigator.appName=="Netscape"
      && parseInt(navigator.appVersion)==4) {
   // NETSCAPE 4 CODE
   var mString =(e.modifiers+32).toString(2).substring(3,6);
   shiftPressed=(mString.charAt(0)=="1");
   ctrlPressed =(mString.charAt(1)=="1");
   altPressed  =(mString.charAt(2)=="1");
   self.status="modifiers="+e.modifiers+" ("+mString+")"
  }
  else {
   // NEWER BROWSERS [CROSS-PLATFORM]
   shiftPressed=evt.shiftKey;
   altPressed  =evt.altKey;
   ctrlPressed =evt.ctrlKey;
   self.status=""
    +  "shiftKey="+shiftPressed
    +", altKey="  +altPressed
    +", ctrlKey=" +ctrlPressed
  }
  if (shiftPressed || altPressed || ctrlPressed)
   alert ("Mouse clicked with the following keys:\n"
    + (shiftPressed ? "Shift ":"")
    + (altPressed   ? "Alt "  :"")
    + (ctrlPressed  ? "Ctrl " :"")
   )
 }
 return true;
}
if (parseInt(navigator.appVersion)>3) {
 document.onmousedown = mouseDown;
 if (navigator.appName=="Netscape")
  document.captureEvents(Event.MOUSEDOWN);
}
//-->
</script>

0 件のコメント:

コメントを投稿