html5 一些好用的原生事件

计算机技术发展这么多年, 有些方面太老了,不适合新时代的发展,
使用新的规范,更方便开发和使用, 提高各方使用人的工作效率, 何乐而不为

drag drop

html5新增属性
某些操作使用拖拽比较方便, 比如调整页面图片顺序,文件批量上传等

使用

drag的事件有开始 中间 结束三个状态,
开始结束两个event是定义在不同的element上,
event可以设置复杂的attribute,这样在事件结束时就可以取出开始的数据

文件上传进度

XHR onprocess 原生事件
多文件上传 multiple

左右滑动

移动端事件, 用来切换tab

方案一、使用touchstart touchend 原生事件

step1.记录移动坐标xy

touchstart ===> event.touches[0].clientX   不要使用pageX
touchend ===> event.changedTouches[0].clientX 不要使用pageX

step2.角度计算

基于数学中的弧度

  Math.atan( Math.abs((this.touchendy - this.touchstarty)/(this.touchendx - this.touchstartx)))* 180/Math.PI < 30   

方案二、使用vue-touch插件

小坑:非标准web场景插件不能用, 比如uni app端没有标准document,它只是使用了JS V8运行引擎

输入框type=progress

进度条直接用input

多指触控

https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events

视频倍速

https://www.w3school.com.cn/tags/av_prop_playbackrate.asp