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
视频倍速
@@@build beautiful things, share happiness@@@