一、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