js鼠标左右键,区分点击和拖拽和键盘事件

280 阅读1分钟

转载:javascript - 鼠标左右键,区分点击和拖拽和键盘事件 - 个人文章 - SegmentFault 思否

onmousedown 事件有个 event.button 可以返回一个数值,根据数值判断取得用户按了那个鼠标键  
event.button==0 默认。没有按任何按钮。  
event.button==1 鼠标左键  
event.button==2 鼠标右键  
event.button==3 鼠标左右键同时按下  
event.button==4 鼠标中键  
event.button==5 鼠标左键和中键同时按下  
event.button==6 鼠标右键和中键同时按下  
event.button==7 所有三个键都按下

兼容IE的写法:  
e = e || window.event;

利用时间戳来区分客户是要点击还是拖拽

var firstTime = 0;
var lastTime = 0;
var key = flase;
document.onmousedown = function () {
  firstTime = new Date().getTime();
}
document.onmouseup = function () {
  lastTime = new Date().getTime();
  if(lastTime - firstTime < 300){
      key = true;//小于300就是点击,大于300就是别的,想干嘛干嘛
  }
}
document.onclick = function () {
  if (key) {
      console.log("click")
      key = flase;
  }
}

键盘事件
一个小的demo可以感受一下 keydown>keypress>keyup
keydown可以响应任何键,keypress只能响应字符类按键

document.onkeydown = function () {
    console.log('keydown')
}
document.onkeypress = function () {
    console.log('keypress')
}
document.onkeyup = function () {
    console.log('keyup')
}

keypress 区分大小写字母,keyCode的值不一样,但是keydown和keyup不区分大小写字母
操作类按键只能用keydown