转载: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