您当前的位置:首页 > 网站建设笔记 >

javascript如何检测Shift Ctrl Alt Meta键的状态

0

虽然鼠标事件主要是使用鼠标来触发的,但在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作。这些修改键就是Shift、Ctrl、Alt和Meta(在Windows键盘中是Windows键,在苹果机中是Cmd键),它们经常被用来修改鼠标事件的行为。DOM为此规定了4个属性,表示这些修改键的状态:shiftKey、ctrlKey、altKey和metaKey。这些属性中包含的都是布尔值,如果相应的键被按下了,则值为true,否则值为false。当某个鼠标事件发生时,通过检测这几个属性就可以确定用户是否同时按下了其中的键。来看下面的例子。

<script type="text/javascript">
var tips=null;
var keys = new Array();
function createTips(event){
  if(tips===null){
    tips=document.createElement("div");
    tips.style.cssText="position:absolute;z-index:99999;padding:3px 6px;background-color:#333;color:#fff;border-radius:3px;box-shadow:0 0 5px #333;font-family:Arial;font-size:12px;";
    document.body.appendChild(tips);
  }
  event=event||window.event;
  tips.innerHTML="Keys: "+keys.join("、");
  var pageX=event.pageX,pageY=event.pageY;
  if(pageX===undefined){pageX=event.clientX+(document.body.scrollLeft || document.documentElement.scrollLeft);}
  if(pageY===undefined){pageY=event.clientY+(document.body.scrollTop || document.documentElement.scrollTop);}
  tips.style.left=(tips.offsetWidth>pageX?pageX:pageX-tips.offsetWidth)+"px";
  tips.style.top=(tips.offsetHeight>pageY?pageY:pageY-tips.offsetHeight)+"px";
}

if(document.addEventListener){
  document.addEventListener("click",function(event){
    keys=[];
    if(event.shiftKey){keys.push("shift");}
    if(event.ctrlKey){keys.push("ctrl");}
    if(event.altKey){keys.push("alt");}
    if(event.metaKey){keys.push("meta");}
    createTips(event);
  },false);
}else if(document.attachEvent){
  document.attachEvent("onclick",function(event){
    keys=[];
    if(event.shiftKey){keys.push("shift");}
    if(event.ctrlKey){keys.push("ctrl");}
    if(event.altKey){keys.push("alt");}
    if(event.metaKey){keys.push("meta");}
    createTips(event);
  });
}
</script>

IE9、Firefox、Safari、Chrome和Opera都支持这4个键。IE8及之前版本不支持metaKey属性。

顶部中部底部