微信小程序-touches和changedTouches

合集 - 微信小程序(60)

1.小程序开发概述2023-04-022.创建第一个小程序2023-04-023.微信小程序app.json文件2023-04-024.微信小程序-sitemap.json文件2023-04-025.微信小程序app.js文件2023-04-026.微信小程序app.wxss文件2023-04-027.微信小程序-project.config.json文件2023-04-068.微信小程序-页面.json文件2023-04-059.微信小程序-页面.js文件2023-04-0510.微信小程序-组件创建和使用2023-04-0611.微信小程序-组件-.json文件2023-04-0612.微信小程序-组件-.js文件2023-04-0613.微信小程序-WXSS学什么2023-04-0714.微信小程序-WXSS的书写格式2023-04-0715.微信小程序-新增RPX响应式单位2023-04-0716.微信小程序-什么是WXML2023-04-0917.微信小程序-WXML数据绑定2023-04-0918.微信小程序-WXML条件渲染2023-04-0919.微信小程序-WXML的hidden属性2023-04-0820.微信小程序-WXML列表渲染2023-04-0921.微信小程序-WXML列表渲染Key2023-04-0922.微信小程序-WXML包装元素2023-04-0923.微信小程序-WXS的作用和使用2023-04-1424.微信小程序-WXS独立文件2023-04-1425.微信小程序-WXS支持的语法2023-04-1426.微信小程序-小程序事件绑定2023-04-1627.微信小程序-小程序事件冒泡和事件捕获2023-04-1628.微信小程序-事件传递数据2023-04-1629.微信小程序-data和mark2023-04-20

30.微信小程序-touches和changedTouches2023-04-21

31.微信小程序-案例练习2023-04-2132.微信小程序-view组件2023-04-2233.微信小程序-text组件2023-04-2234.微信小程序-icon组件2023-04-2235.微信小程序-button组件2023-04-2236.微信小程序-image组件2023-04-2437.微信小程序-scrollview2023-05-1338.微信小程序-image组件-选择相册资源案例2023-04-2439.微信小程序-自定义组件2023-05-1340.微信小程序-自定义组件样式隔离2023-05-1441.微信小程序-自定义组件外部样式2023-05-1442.微信小程序-传递数据父传子2023-05-1443.微信小程序-传递数据子传父2023-05-1444.微信小程序-页面访问组件数据和方法2023-05-1445.微信小程序-组件通讯练习2023-05-1446.微信小程序-单个插槽2023-05-1547.微信小程序-多个插槽-具名插槽2023-05-1648.微信小程序-behaviors2023-05-1749.微信小程序-双线程渲染模型2023-05-1850.微信小程序-页面生命周期2023-05-2051.微信小程序-页面生命周期方法2023-05-2152.微信小程序-组件生命周期方法2023-05-2153.微信小程序-应用程序生命周期方法2023-05-2154.微信小程序-页面跳转Tabbar2023-05-2155.微信小程序-页面跳转navigator组件2023-05-2156.微信小程序-页面跳转wxAPI2023-05-2157.微信小程序-页面跳转数据传递2023-05-2158.微信小程序-常用弹窗2023-05-2159.微信小程序-Storage2023-05-2160.微信小程序-获取用户位置2023-05-21

收起

在经过上一篇文章的介绍，已经清楚的了解了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监听到了发生变化，就保存了这个数据。