触屏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就一个值。

aaarticlea/png;base64,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" alt="" />aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAABICAIAAADkhokbAAAMY0lEQVR4nO2d21Mb1x2A8z/kwTOZzmTwjEaTBw9PbjsMM5lhkpSZNhnqpLj1VKGhCSa1MaKGBgdajBtsmYyNKTIQ29ixTYwUcwlYNhCuAoFlkA0KFwGSuOiCJKRF6LbSsto9fTh0u5aEoytgfL7Ri7Q/zu6iT+ecPWf3d14DiFee13b7ABC7D5IggQwNDWVmZloslt0+kJ/hOQnq6upOBVFXV8eO8a57f/zHAG7D47J7ZeOMsnEmLkWFRK1Wp6amJrGQy+UxFlhaWorjz52+XC4XCATBwWFKcPXq1bGxsViOKkaek8BsNvP5fLYBfD7fbDazY3Ab3pHT9bJIAMEw7JNPPlGr1bEXFZEEYSIQCGJUM0YCm4Pm5ma2BM3NzeytA+UywevVzGugXAYAIFyb/f8a/voNYc1b1yfvTFMkBSN1MgN4XhqHztmaJak8UCN4vRpuVTbO9P1zSPxR29dvCMfrJ+DfmiYs9zJaKg/UtGZJHDrn1i7KhqsO1jM7hej1+iNHjjx79uzFJxkswdjYWHp6OofDyc7O1ul0AACxWCwWiwEAOI6XlpbCYJIkW1paUlJSkpKS8vPzcRxXq9V8Pv/s2bNcLvfEiRMYhoFQEuA4np+fn5SUlJGRAWMAAG63+/z588nJyUlJSTBeLpezayl28E4SKIHH4ykuLoYGFBcXezyegIDAmoAGj6vGH1eN+31+l8ndwntgeLIKQklAuDY7crrmOtTwm4YoG2duvyOyqmwOg/P+n9o3lh3edW93Ub/D4KQpWtO91HtG6if8Opmh63S/3+cPOJjoJFheXs7KytJoNBRFtbe3FxcXEwQRUoLBwcFTp06x60K1Wv3ee++1tbURBFFeXv7w4UOwfU2AYVh+fj7zvcrl8pKSEoIgAsL2XE0AAJBKpVACqVQavDVAAsJFPDzxI6a2w7dM9R4sgW0e6yzo23Rvsktj4jc9ZHdhv20eMypMl9+sZSqbjpyuTQ/p0Dm/+939gbOytVkbTdGRnmSABH19fZcuXWI2we8ppAQCgUAmk7GLYjcHzJ+EKYHBYDh69OiFCxfm5uYo6v+/hL0oAUVRFRUVFRUV7ANliFQCzxre/mln+BLoHxt7z0jZtQXET/gNT1Yfnvjx4cmeTQ8Z0UlGJIHH4zlz5kwiJAAAEAShUCgKCwuLioqYjsVelAAAMDMzMzMTur/m2/C18CSrz7ZqSIqk+kqHxr+Z8Pv8DoNT/IcfTM8sAIChitHp7+dIr3+oYvT2uyLchnvXvff/2K7tWWL/lIMlcJnc4o/adKPGkL94p9H1w18fMQpG1xyoVCoej7e4uEhRlEgkKisrIwiitbX1ypUrJEmKRKK3334bBnd0dBQUFNjtdqaoGCWArK6unjx5kvlcKBQ2NDSE/MntDJGPE9BA1bZw9VAD00fzrOEdx7u+fkN49VCDqm0B0AAAYJ3DbqTcrXnr+mjVeOvHEvi1wR4frOeZjmGABAAA/WPjrbQmGAa3Khtn4Ntvfnmb2QWIVgKapiUSSVpaGofDycvLs1qtAACLxcLj8bhc7sWLF/l8Pgz2er21tbWwK8d0DENKwHTuUlNT1Wo1hmEZGRnMh/BvxWIxfJuWliaRSGh66zS0Wu2xY8f2UMcQ8QqCJEAgCRBIAgRAEiBAdBLU1dUFTCggXmqikQBOLDU3NwcPKkM2dM6Ry2Pdp/t/ujcbMDr0YgQCAXssHV5ZRXGE7AJ3dxzmpSBKCZjJBalUGjDK4XMQTxuUToOLpmm93KjtWYq0fLFYHMukHBskQTjEJAGkoqKCPby4rrGr2hZoiqY2KVXHwnjdBImTAACn05mdnQ1nXF5MgARw8o3L5R4+fFgkEpEkyR6JY0braJqWSqXp6ensUReBQFBTU/P+++8fPnw4nF2/msRfAsOTVcOTVdJLTolmtb3Lk3emCRcBopWApuna2tra2lqCIMxmc05OjkKhCCmBSqXKysrSarXMSBwAQCAQfPbZZ2azeWpq6vjx4w6HI4rz3ffEvzkwPFnV9ixN3Zu1TFkJ1+bk3S0JwoctgcvlKiwsXFxcZDaJxeKQEojF4qampoCimOZgu2F8BEhEx9C2gA2eG1nXbgAAcMyrbJyGzUH4RCSBTCZDEsRI/C8RfQ5i8s60Zw2nSEr9SMt0DKNrDkiS/Oqrr27dukUQhNFozMrKUiqVdrs9NzdXq9UajcajR4/CYIVCwePx9Ho9uygkQTgkZLBoXWuXVcq7iwbmOtTk/24HirpjaLVa+Xw+l8tNSUmBk280Tbe0tHC53MzMTKFQCIPZt4KxO4ZIgp8FjRgikAQIJAECIAkQAEmAAGgWEQESMVhE07TT4JoSzUorRt1md0Qlo1nEXSEhs4izrfO2BWy8fiJSCSBoFnGHif8EEoRwEYprk2wJ0CzinmWvS4BmEXeA+DcHkGAJwgfNIu4wCbm9DOygBGgWMXYSdYkYr+YAzSLuAPEfLCJcxGjVWGdBH3xN3p32E36AZhH3MGjEEIEkQCAJEABJgABIAgRAEiBAIiTY9JAdOV2C16thqqK4lDnbOj8tVjFvY0moSVHgUcvGO4dUv3pz+m69jYzsbvj9SaJqgoQmPo2lcNsaee3ymstJreo3P/39olIRnyN8qdkhCUicfFw1XnWw/uqhhinRLMxQN3p57OkNZUNqY9XB+pn7cwA8lxUL1iXGJ6u1yTeZtIa1yTdt8xhuw1s/lsguyqsO1jf+9v66diu7WPjjUQAAmgaXykxjsmgGtvcZOyTBbOu88u40TdHeda/kb90wzd1Auaz90063xWOetLTwJL4NH6a2t/AeOAxOn5NgwkComuDOb8TyagXp9SuuTY5e3soOHZEEFhNZ8JeVlcXIHpHbl+yEBH7C38nvZSdFhvnrgrOesiV4kNtlVJhgaS9oDnQyAzvbcZh43FTJCX3rd+t0xOlR9yE7IQHp9Xf9vc+sXAuICZbAu+5t+fODmreuVx2sH6+bYPKaxlcCj5sSfLl6s8aKeoWQHWoOnt5Q9p6R+hzP1b3BEuhkht4vQ+S0nWtX93wxyCS43k6CcJoDL05XnTMhA9jEXwLcht9+VxSQoZqdq565dAyWYGPFcf3Xd+AfVh2sV1ybhELABMmVB2qYjmHUEozJ3L94bYJ5fXFc58Vf9SZhbw0WPb2hlP57hPbTgAYrw/rmYx2+Dd9uH9T+Z29JYJmyij5sqzxQU3mgRvRhm2lir68etD/YWxIgdgUkAQJJgEDPIr4sWCyWzMzMoaGhRBSeqFvOEw3pIWea5yLNixYLAetYJCUlwRUvYikw+N7XkEvugbAliG6JxUQ9fJJoCBcRRXK82IFr3cXl+caIJAiT6J69TNRjaOGg7VlakRlklfKeL6XGcRMAgHARE7enlgd1g+Uj/WXDtgUMAED6/HMd6u6igf6yYd1jI03R8xINc0t7Z0HfvEQTMiyigwlz8ilYAqvVmpeXx+Fw0tLSent7aZoOuURO8BKLGIbl5uZeuXIlOTk5MzNzaWkJbCMBs24Os19mBR/m/vpYlljcTQnmJZrJO9OEk8Ax/On1SRzzEi5C/h/FisxAbVIby47p71UUSWt7lrQ9SxRJwazJ9qUNEKomCBkWPtFJQBBESUlJe3s7RVEajYbH4y0vL4eUIHiJRQzDjhw5Ul9f7/P5vv32W6FQCF5YE7B/5VAguKzndjHhs5vNwbxEs66xAwBoila1Laxr7cFfrd/nn7o361nb+qfAnLkgSILtwuJOgAQmkykvL49ZLg1+ByElCF5dL+QTlWFKQBDEhQsXsrOzh4eHvV5vyJjw2c2OISMB5admmufsyxv7T4KmpqZESAAAoChKp9MJhcIPPvhAo9GEjAmT3bxEnJdorHMYAGB90T5xe4r0kMES0BQ9165ekuookvLaveP1ExsrTgAAiZPPbv60oXO+OCx8omsO3G53Xl7eo0ePKIqCyy3q9frFxcXPP//cZrOpVKq0tDQoQfASizFKACFJ8ty5c8zn0S2xuJuDRbB/1326f6xuwm3xgG36/ISTUDZOdxcNDJaPsGcTTBOWwfIRpmO4XViYRN0x1Gq1PB6Pw+Gkp6fDyzOSJKurqzkcTk5OjkAggBIEL7G4nQSpqalM/w7uiJ3FB667yIQlJyefP3/e7XYzBxPFEou7LAFsDhC7S/wlYD+SDF+Ka5MBnwyeG3Gb3YmWIOBKsrOgT1Yph5UH+5Wg3sNLBJo7QCAJEEgCBADgvw78ZgbZzehGAAAAAElFTkSuQmCC" alt="" />

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