一、chrome中的Remote Debugging
一开始并没有用这个调试，不过后面需要多点触碰，可chrome模拟器中我没看到这个功能。突然看到了Remote Debugging，网站需要FQ才能浏览。
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中
这次两个是相等的。
参考资料：
What is the difference between screenX/Y, clientX/Y and pageX/Y?
http://www.zhangyunling.com/?p=223 移动端的touch事件
移动开发之touch event篇
http://www.html5rocks.com/zh/mobile/touch/ 多点触摸网络开发
Variation of e.touches, e.targetTouches and e.changedTouches
posted on
