zoukankan      html  css  js  c++  java
  • 移动端touch事件

    touch事件是移动端特有的,pc端不支持

    touchstart:开始触摸事件
    touchmove:手指滑动事件(持续触发)
    touchstend:触摸结束事件
    touchcancal:触摸意外中断事件(手机中途来电?)

    1.基本用法
    var div = docuemnt.querySelector('div');
    div.addEventListener('touchstart',function(){
        //只触发一次
        console.log("touchstart");
    })
    div.addEventListener('touchmove',function(){
        //持续触发
        console.log("touchmove");
    })
    div.addEventListener('touchend',function(){
        //只触发一次
        console.log("touchend");
    })
    2.touchEvent事件对象
    var div = docuemnt.querySelector('div');
    div.addEventListener('touchstart',function(e){
        //打印
        console.log(e.touches);
        console.log(e.targetTouches);
        console.log(e.changeTouches);
    })

    Touch 属性

    事件对应的三个列表虽然名字不一样,但是它们里面装的东西都是差不多的,包含了当前事件的一些相关信息,比如:一些坐标信息。

    TouchList {0: Touch, length: 1}
    length:1
    0:Touch
        clientX:65 // 触摸点在浏览器窗口中的横坐标
        clientY:18 // 触摸点在浏览器窗口中的纵坐标
        force:1 // 触摸点压力大小
        identifier:0 // 触摸点唯一标识(ID)
        pageX:65 // 触摸点在页面中的横坐标
        pageY:18 // 触摸点在页面中的纵坐标
        radiusX:11.5 // 触摸点椭圆的水平半径
        radiusY:11.5 // 触摸点椭圆的垂直半径
        rotationAngle:0 // 旋转角度
        screenX:560 // 触摸点在屏幕中的横坐标
        screenY:175 // 触摸点在屏幕中的纵坐标
    target:div#touchLog 触摸目标
    __proto__:Touch
    __proto__:TouchList

    https://www.cnblogs.com/cangqinglang/p/8794621.html
    sunshine15666
  • 相关阅读:
    贪心例题
    第十六周总结
    软件工程个人课程总结
    冲刺二十一天
    浅谈async/await
    浅谈设计模式的六大原则
    dotnetcore配置框架简介
    这一次,终于弄懂了协变和逆变
    科个普:进程、线程、并发、并行
    五分钟了解Semaphore
  • 原文地址:https://www.cnblogs.com/xiaolucky/p/11550983.html
Copyright © 2011-2022 走看看