zoukankan      html  css  js  c++  java
  • 触屏touch事件记录

    一、chrome中的Remote Debugging

    一开始并没有用这个调试,不过后面需要多点触碰,可chrome模拟器中我没看到这个功能。突然看到了Remote Debugging,网站需要翻墙才能浏览。

    1)以我的红米为例,首先要打开USB调试

    2)手机连接电脑,打开PC的chrome,输入“chrome://inspect”,“Discover USB devices”这里要打勾,我打开这个页面的时候默认就勾上了。

    手机上面也要安装chrome,下面“NOTE 1LTE”就是我的手机,已经连接上了

    3)点击上图中的inspect,就会跳出一个新的页面

    二、touch触摸事件

    页面HTML结构如下:内容省略了,为了有滚动条,故意弄的长了点,点击查看在线代码

    <section id="section1">......</section>
    <section id="section2">......</section>
    <section id="section3">......</section>
    <section id="section4">......</section>
    <section id="section5">.......</section>
    <section id="section6">......</section>

    touchstart:当触点与触控平面接触时触发。在PC端,我们经常会用到click,但是在移动端click有300ms的延迟。

    touchmove:当触点在触控平面上移动时触发。

    touchend:当触点离开触控平面时触发。

    下面看看4个事件的执行顺序(在chorme中模拟Mobile点击)。

    document.addEventListener('touchstart', function(event) {
      console.log('touchstart');
    }, false);
    document.addEventListener('touchmove', function(event) {
      console.log('touchmove');
    }, false);
    document.addEventListener('touchend', function(event) {
      console.log('touchend');
    }, false);
    document.addEventListener('click', function(event) {
      console.log('click');
    }, false);

    1)先做点击,结果是click事件最后执行,如果在“touchstart”事件中加上“event.preventDefault();”,则会阻止click事件的执行。

    关于事件的说明可以参考《JavaScript中事件处理

    用自己的红米note1测试的时候UC浏览器,微信浏览器,自带的浏览器均是这个顺序。

    2)再做移动,轻轻一移就触发了18次“touchmove”事件。

    三、事件中的event参数

    touch和click事件中的event是不同的对象。click多了好多参数,这里只关注下touche事件中的event。

     

    1)touches

    当前位于屏幕上的所有手指的列表,是一个Touch对象数组。

    我把一个手指放到屏幕上数量就是1,两个手指就是2,三个手指就是3。

    没有滚动条

    有滚动条

    touch对象中有多个坐标属性,蛮搞的。

    1. clientX/clientY:触摸点相对于浏览器窗口viewport的位置,不包含滚动距离。这个值会根据用户对可见视区的缩放行为而发生变化。

    这里我通过控制meta中initial-scale属性来变化。可以看到放大后,cilentY将近是原来的一半。

    initial-scale=1

    initial-scale=2

    2. pageX/pageY:和 clientX/clientY 属性不同,这个值是相对于整个html文档的坐标, 这个值包含了垂直滚动的偏移。

    上面有滚动条的图片属性中可以看到pageY远大于旁边没有滚动条的。

    3. screenX/screenY:触摸点相对于屏幕screen的位置。

    在IOS中与clientX/clientY属性不同,不会受到initial-scale的影响;而在安卓中微信和UC会受之影响,而手机版chrome与红米note自带的浏览器不会被影响。

    在chrome中做模拟Mobile就会发现在同一个位置,不同initial-scale中点击下去,screenY/screenX结果都是相同的。

    在Iphone6中测试X轴的3种情况

    a. 如果initial-scale=1.0,那么在没有滚动条的时候,3个数值是一样的,都按屏幕宽度375来计算

    b. 如果没有下面的viewport语句,那么screenX会以屏幕宽度375来计算,而其他两个值会按放大后的计算数值

    c. 如果initial-scale=2.0,screenX还是会以屏幕宽度375来计算,而其他两个值会按缩小一倍后的计算数值

    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

    4. radiusX/radiusY:能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)/垂直轴(Y轴)半径,这个值的单位和screenX/screenY相同。

    5. rotationAngle:以度为单位的旋转角,由radiusX和radiusY描述的正方向的椭圆,通过顺时针旋转这个角度后,能最精确地覆盖住用户和触摸平面的接触面的角度。

    6. force:手指挤压触摸平面的压力大小,从0.0(没有压力)到1.0(设备可识别的最大压力)的浮点数。

    7. target:这个触点最开始被跟踪时(在 touchstart 事件中),触点位于的HTML元素。

    8. identifier:Touch 对象的唯一标识符。

    2)changedTouches

    这个 TouchList 对象列出了和这个触摸事件对应的 Touch 对象。

    1. 在touchstart中:列出在此次事件中新增加的触点。如果同时放下一根或两根手指,那么将与touches相同,但如果先放一根,在放第二根,那就会不同。

    2. 在touchmove中:列出和上一次事件相比较,发生了变化的触点。

    用chrome的Remove Debugging测试,我用了两根手指。但两根手指接触到屏幕是有时差的。所以在第一次move的时候changedTouches就一个值。

    changedTouches[0]=touches[1],最后一个也是这样。接下来移动手指的时候,changedTouches和touches是一样的。

    3. 在touchend中:列出离开触摸平面的触点(这些触点对应已经不接触触摸平面的手指)。

    还是用两根手指,依次将手指移开,当离开屏幕的时候,执行了两次“touchend”事件。

    第一次中打印的值如下,第二次的值中touches为空,changedTouches的值就是第一次中的touches的值。

     

     

    3)targetTouches

    这个 TouchList 对象与touches类似,但是增加了个过滤条件,就是要与第一个手指点的地方(同一个节点内)相同。

    1. 先将第一根手指点在了“id=section1”,再点第二根手指到不是“section1”的地方,看第二个“touchstart”事件中的内容:

     

    targetTouches[0] = touches[1]

    2. 与第一次不同,第二根手指也放到section1

    这次两个是相等的。

    参考资料:

    http://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y  

    What is the difference between screenX/Y, clientX/Y and pageX/Y?

    http://www.zhangyunling.com/?p=223   移动端的touch事件

    http://www.aliued.cn/2013/04/27/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91%E4%B9%8Btouch-event%E7%AF%87.html   

    移动开发之touch event篇

    http://www.html5rocks.com/zh/mobile/touch/   多点触摸网络开发

    http://stackoverflow.com/questions/7056026/variation-of-e-touches-e-targettouches-and-e-changedtouches  

    Variation of e.touches, e.targetTouches and e.changedTouches

  • 相关阅读:
    训练总结
    图论--最短路--SPFA模板(能过题,真没错的模板)
    图论--最短路-- Dijkstra模板(目前见到的最好用的)
    The 2019 Asia Nanchang First Round Online Programming Contest B Fire-Fighting Hero(阅读理解)
    关于RMQ问题的四种解法
    The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 K题 center
    The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 XKC's basketball team
    The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 D Carneginon
    ZOJ 3607 Lazier Salesgirl (枚举)
    ZOJ 3605 Find the Marble(dp)
  • 原文地址:https://www.cnblogs.com/strick/p/5155042.html
Copyright © 2011-2022 走看看