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