• JS的Touch事件们,触屏时的js事件


     

    丫的,终于找到了JS在平板电脑上的事件!!!
     
    iphone、ipod Touch、ipad触屏时的js事件
     
    1、Touch事件简介
     
    pc上的web页面鼠标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件,但是在移动终端如iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel事件,分别对应了触屏开始、拖拽及完成触屏事件和取消。
     
    当按下手指时,触发ontouchstart;
    当移动手指时,触发ontouchmove;
    当移走手指时,触发ontouchend。
    当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。
     
     
    2、Touch事件与Mouse事件的出发关系
     
    在触屏操作后,手指提起的一刹那(即发生ontouchend后),系统会判断接收到事件的element的内容是否被改变,如果内容被改变,接下来的事件都不会触发,如果没有改变,会按照mousedown,mouseup,click的顺序触发事件。特别需要提到的是,只有再触发一个触屏事件时,才会触发上一个事件的mouseout事件。
     
     
    3、gesture事件
     
    Gesture事件,包括手指点击(click),轻拂(flick),双击(double-click),手指的分开、闭合(scale)、转动(rotate)等一切手指能在屏幕上做的事情,它只在有两根或多根手指放在屏幕上的时候触发,事件处理函数中会得到一个GestureEvent类型的参数,它包含了手指的scale(两根移动过程中分开的比例)信息和rotation(两根手指间连线转动的角度)信息。这个事件是对touch事件的更高层的封装,和touch一样,它同样包括gesturestart,gesturechange,gestureend。
    gesture事件触发过程:
    Step 1、第一根手指放下,触发touchstart
    Step 2、第二根手指放下,触发gesturestart
    Step 3、触发第二根手指的touchstart
    Step 4、立即触发gesturechange
    Step 5、手指移动,持续触发gesturechange,就像鼠标在屏幕上移动的时候不停触发mousemove一样
    Step 6、第二根手指提起,触发gestureend,以后将不会再触发gesturechange
    Step 7、触发第二根手指的touchend
    Step 8、触发touchstart!注意,多根手指在屏幕上,提起一根,会刷新一次全局touch!重新触发第一根手指的touchstart
    Step 9、提起第一根手指,触发touchend
     
     
    另在w3school上看到可以这样来判断平台:
    function checkStation(){
    var info = navigator.userAgent;
    if(info.indexOf("iPod")!=-1 || info.indexOf("iPad")!=-1 || info.indexOf("iPhone")!=-1 || info.indexOf("Android")!=-1){
    alert("平板");
    return true;
    }else{
    alert("电脑");
    return false;
    }
    }
  • 相关阅读:
    给你一个长度为 n 的数组,其中只有一个数字出现了大于等于 n/2 次,问如何使用优秀的 时空复杂度快速找到这个数字。
    给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现偶数次。找出那个只出现了一次的元素。
    python虚拟环境配置
    测试环境配置
    使用ELK Stack收集kubernetes集群内的应用日志
    vue 禁止遮罩层下的页面滑动
    vue 把 java 传过来的流文件 转成apk、xls等
    vue 中使用 webSocket 收发数据, 增加 " 心跳机制 " 保持连接.
    webstrom 根据当前编辑文件定位左侧目录
    MySQL 8.0新特性详解(转)
  • 原文地址:https://www.cnblogs.com/xiamibk/p/4093749.html
Copyright © 2020-2023  润新知