移动开发基础-touch事件

Posted 2020-06-09

手机上的大部分交互都是通过touch来实现的，于是，对于触屏的交互式网站，触摸事件是相当重要的。

先了解一些规范

手指触摸屏幕可以触发的几个事件

 touchstart：触摸开始的时候触发

 touchmove：手指在屏幕上滑动的时候触发

 touchend：触摸结束的时候触发

 

每一个触摸事件都会产生一个触摸事件对象，对象包含的公共事件属性（他们都是TouchList类型的对象里面装着Touch对象），而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：

touches：当前位于屏幕上的所有手指的列表。

targetTouches：位于当前DOM元素上手指的列表。

changedTouches：涉及当前事件手指的列表。

 

每个触摸点由包含了如下触摸信息（常用）：

identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）

target：DOM元素，是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。　

radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。

现在来一个小实例

 1  var spots={},touches,timer;
 2       document.addEventListener(‘touchstart‘,function(e){ 
 3           e.preventDefault();
 4           [].forEach.call(e.targetTouches,function(touch){
 5               //如果已经有了小光点，直接离开
 6                 if(spots[touch.identifier]){
 7                     return;
 8                 }
 9                 var spot=spots[touch.identifier]=document.createElement(‘div‘);
10                 spot.classList.add(‘spot‘);
11                 spot.style.top=touch.pageY-35;
12                 spot.style.left=touch.pageX-35;
13                 document.body.appendChild(spot);
14           }) 
15       },false);
16       document.addEventListener(‘touchmove‘,function(e){
17           e.preventDefault();
18           touches=e.touches;
19           timer=setInterval(function(){
20             renderTouches(touches);
21        },16) 
22       });
23       function renderTouches(touches){
24           if(!touches){
25               return;
26           };
27           [].forEach.call(touches,function(touch){
28               var spot=spots[touch.identifier]
29               if(spot){
30                   spot.style.top=touch.pageY-35;
31                   spot.style.left=touch.pageX-35;
32               }
33           })
34       }
35      document.addEventListener(‘touchend‘,function(e){
36           
37          e.preventDefault();
38          [].forEach.call(e.changedTouches,function(touch){
39              var spot=spots[touch.identifier]
40              if(spot){
41                  document.body.removeChild(spot);
42                  delete spots[touch.identifier];
43              }
44          })
45          if(e.changedTouches.length==0){
46              clearInterval(timer);
47          }
48      })

css代码

 1   body{
 2              color:white;
 3              background-color: #222;
 4          }
 5          .spot{
 6              position: absolute;
 7              width:70px;
 8              height:70px;
 9              border-radius: 35px;
10              box-shadow: 0px 0px 40px #fff;
11              background-color: #fff;
12              opacity: .7;
13          }

实现的效果是点击触摸屏时出现一个小圆点，小圆点随着手移动。