随笔- 304  文章- 81  评论- 807 

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

 posted on 2016-01-27 10:40  咖啡机(K.F.J)  阅读(1076)  评论(0编辑  收藏