touch的小故事 [每天进步一点点系列]

[stuxt]

TouchEvent在移动开发中经常用到，在touch事件中分为三个步骤：touchstart、touchmove、touchend。

当然还有touchenter 、touchleave和touchcancel。

这里主要讨论讨论使用概率最高的touchstart、touchmove和touchend三个事件。

最近在做移动端的一个需求，发现一个有意思的事情（问题）。

首先说一下我的需求：就是在移动端想通过touch事件，来获取touchmove过程中触点的每个页面元素，就像在pc端的mouseover一样。

但是通过demo测试发现，touch的表现和mouseover不一样，怎么不一样呢？我就用一个小例子来说明一下，比如：我们走路从A点准备走到E点，途中会经过B、C、D点，我们在出发的时候发一个定位给E点的朋友，告诉他我在A点，我准备出发了。等我走到B/C/D点的时候分别发送我的定位给他，告诉他我到了哪里了。

对标上面的这个例子，mouseover可以完美的实现，鼠标经过哪个元素，就可以从event事件属性中获取到这个元素的信息，但是touch却不行。

touch给我们的表现是：无论我到哪里发送的定位始终都是A点的定位，即使我到了E点了，定位还是A点的定位。具体表现看如下例子截图：

touchstart 事件从如图所示的23456元素开始touch事件

touchmove事件，已经移动到 q325 元素上，但是target依然指向23456元素

其实经过坐标计算之后的元素实际的为q325元素

所以，touch不能像mouseover那样来通过简单的event属性来获取到我触点的前端元素信息。

那么这种情况该怎么解决呢？

查阅了很多资料，最终发现一个API可以达到我们的需求，这个API就是：elementFromPoint（x , y）;这个API可以通过页面中的x/y坐标来找到当前坐标下对应的元素是哪个元素。

于是我们可以再touchmove的事件属性中找到touches数组列表，取到对应的x/y坐标，来实现定位元素。