读书项目:阅读器翻页功能实现

 TouchEvent事件

  • 在changeTouches当中有几根手指就有几条数据

读书项目:阅读器翻页功能实现_第1张图片

pageX clientX screenX的区别

  • pageX/pageY:鼠标相对于整个页面的X/Y坐标
    • 整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了
    • IE不支持
  • clientX/clientY:事件发生时鼠标在浏览器内容区域的X/Y坐标(不包含滚动条)
    • 浏览器内容区域即浏览器窗口中用来显示网页的可视区域,注意这个可视,也就是说需要拖动滚动条才能看到的区域不算
    • 当你将浏览器窗口缩小时,clientX/clientY的最大值也会缩小,但始终,它们的最大值不会超过你浏览器可视区域
    • IE下此属性不规范,它们的最小值不是0而是2,也就是说IE下的clientX/clientY比火狐下始终大2px
  • screenX/screenY:鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过屏幕分辨率

时间戳

读书项目:阅读器翻页功能实现_第2张图片

可以用来判断两次操作的间隔时间

这里规定不大于500ms,手指长按时不做确认

EbookReader.vue






 

 

 

你可能感兴趣的:(前端)