在经过上一篇文章的介绍，已经清楚的了解了data与mark的区别，本章将要介绍的也是事件对象当中的两个属性，分别是，touches与changedTouches。

首先我们先搭建一个案例，运行这个案例看输出的事件对象当中，这个两个属性分别保存的是什么内容。

index.wxml:

<view bind:tap="onTap">我是View</view>

index.js:

Page({
  onTap: function(event){
    console.log(event)
  }
})

输出结果：

changedTouches: [{…}]
currentTarget: {id: "", offsetLeft: 0, offsetTop: 0, dataset: {…}}
detail: {x: 43, y: 12.75}
mark: {}
mut: false
target: {id: "", offsetLeft: 0, offsetTop: 0, dataset: {…}}
timeStamp: 332421
touches: [{…}]
type: "tap"
_userTap: true

这里我们发现，这两个属性分别保存的是数组, 可以看出是多个内容，具体是什么内容，就要从他们之间的区别开始说起。

touches和changedTouches的区别

看区别之前，我们来看看他们的作用分别是什么：

?> 作用：保存当前操作元素的手指数据(pageXY/ClientXY按下的数据)

区别：

• 如果只有一根手指操作，那么没有任何的区别（两个属性存放的值是一样的）
  
• 如果是多根手指操作，那么有可能有区别（因为两个属性存储的数据类型是数组）
  
• 如果是多根手指同时按下，那么没有区别（两个属性存放的值是一样的）
  
• touches中保存的是所有按下的手指
  
• changedTouches中保存的是发生变化的手指
  

例如：目前有三根手指，一根先按下，另外两根后按下：

• 那么 touches 中保存的就是三根手指的位置
• 那么 changedTouches 中保存的就是后按下的那两根手指位置

最后举例的这个证明，也是可以证明的，我们可以使用 touchend 事件来进行演示即可更改代码：

index.wxml:

<view bind:touchend="onTouchend">我是View</view>

运行结果：

changedTouches: [{…}]
currentTarget: {id: "", offsetLeft: 0, offsetTop: 0, dataset: {…}}
detail: {}
mark: {}
mut: false
target: {id: "", offsetLeft: 0, offsetTop: 0, dataset: {…}}
timeStamp: 863392
touches: []
type: "touchend"
_requireActive: false
_userTap: false

我们可以看到 touches 存放的是空，为什么是空呢，因为我们使用的是手指触碰结束事件，我们没有手指点击，就等于没有实际的手指点击，因为我们点击之后立马松开手指，这个时候我们的changedTouches监听到了发生变化，就保存了这个数据。