JS 键盘事件、触摸事件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/boonyaxnn/article/details/89193792

一、键盘事件：指当用户在操作键盘的时候会自动被触发的事件

keydown:键盘按下时触发
keypress:键盘按下时触发 功能键无法响应
keyup: 键盘抬起时触发

注意：
1.keydown keypress 按下不放一直触发；
2.keypress无法触发功能键
3.keypress无法捕获组合键
4.keypress 可以区分大写字母和小写字母
5.keydown 可以区分小键盘上的数字和主键盘上的数字
  keypress无法区分小键盘上的数字和主键盘上的数字
6.PrScrn按键KeyPress、KeyDown和KeyUp都不能捕获。

二、触摸事件

(1)touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
(2)touchmove:当手指在屏幕上滑动时连续的触发。
(3)touchend:当手指从屏幕上移开时触发。
(4)*touchcancel:当系统停止跟踪触摸时触发。(如电话接入或者弹出信息,一般在这个操作中来做一些暂停游戏类的操作 或者点击通知)

eg：

var box = document.querySelector('.box');
var div1 = document.querySelector('.div1');
box.addEventListener('touchstart', function () {
    console.log('touchstart 触发');
    /*
    触摸点 位于移动端内 视口的坐标
    */
    console.log('clientX,y(x,y)',event.touches[0].clientX,event.touches[0].clientY);
    //触摸点位于移动端界面的坐标 包含滚过的距离
    console.log('pageX,y(x,y)',event.touches[0].pageX,event.touches[0].pageY);
    //距离屏幕左顶点的距离
    console.log('screenX,y(x,y)',event.touches[0].screenX,event.touches[0].screenY);
});