zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Teradata 奇淫技巧
    Java
    搬砖
    js 判断2个对象的值是否相等
    搬砖
    UnsupportedClassVersionError: JVMCFRE003 commons/text/StringEscapeUtils
    杂记
    java查找最新文件
    搬砖
    搬砖
  • 原文地址:https://www.cnblogs.com/yszzu/p/12212685.html
Copyright © 2011-2022 走看看