大家好，我是1024小神，技术群 / 私活群 / 股票群 或 交朋友 都可以私信我。
如果你觉得本文有用，一键三连 (点赞、评论、关注)，就是对我最大的支持~
什么是事件
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息，如 id, dataset, touches。
事件的使用方式
- 在组件中绑定一个事件处理函数。
如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
bash
<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>- 在相应的Page定义中写上相应的事件处理函数，参数是event。
javascript
Page({
tapName: function(event) {
console.log(event)
}
})- 可以看到log出来的信息大致如下：
json
{
"type":"tap",
"timeStamp":895,
"target": {
"id": "tapTest",
"dataset": {
"hi":"Weixin"
}
},
"currentTarget": {
"id": "tapTest",
"dataset": {
"hi":"Weixin"
}
},
"detail": {
"x":53,
"y":14
},
"touches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}],
"changedTouches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}]
}
xml
<h2 id="使用WXS函数响应事件">使用WXS函数响应事件</h2>
<blockquote>
<p>基础库 2.4.4 开始支持，低版本需做<a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="兼容处理" href="https://developers.weixin.qq.com/miniprogram/analysis/experience/compatibility.html" title="兼容处理">兼容处理</a>。</p>
</blockquote>
<p>从基础库版本<code>2.4.4</code>开始，支持使用WXS函数绑定事件，WXS函数接受2个参数，第一个是event，在原有的event的基础上加了<code>event.instance</code>对象，第二个参数是<code>ownerInstance</code>，和<code>event.instance</code>一样是一个<code>ComponentDescriptor</code>对象。具体使用如下：</p>
</li>
<li>在组件中绑定和注册事件处理的WXS函数。</li>
<li>
<pre><wxs module="wxs" src="./test.wxs"></wxs> <view id="tapTest" data-hi="Weixin" bindtap="{{wxs.tapName}}"> Click me! </view> 注：绑定的WXS函数必须用{{}}括起来
- test.wxs文件实现tapName函数
javascript
function tapName(event, ownerInstance) {
console.log('tap Weixin', JSON.stringify(event))
}
module.exports = {
tapName: tapName
}
xml
<p><code>ownerInstance</code>包含了一些方法，可以设置组件的样式和class，具体包含的方法以及为什么要用WXS函数响应事件，请<a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="点击查看详情" href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html" title="点击查看详情">点击查看详情</a>。</p>
<h2 id="事件详解">事件详解</h2>
<h3 id="事件分类">事件分类</h3>
<p>事件分为冒泡事件和非冒泡事件：</p>
</li>
<li>冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。</li>
<li>非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。</li>
<li>
<p>WXML的冒泡事件列表：</p>
<table>
<thead>
<tr>
<th>类型</th>
<th>触发条件</th>
<th>最低版本</th>
</tr>
</thead>
<tbody>
<tr>
<td>touchstart</td>
<td>手指触摸动作开始</td>
<td></td>
</tr>
<tr>
<td>touchmove</td>
<td>手指触摸后移动</td>
<td></td>
</tr>
<tr>
<td>touchcancel</td>
<td>手指触摸动作被打断，如来电提醒，弹窗</td>
<td></td>
</tr>
<tr>
<td>touchend</td>
<td>手指触摸动作结束</td>
<td></td>
</tr>
<tr>
<td>tap</td>
<td>手指触摸后马上离开</td>
<td></td>
</tr>
<tr>
<td>longpress</td>
<td>手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发</td>
<td><a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="1.5.0" href="https://developers.weixin.qq.com/miniprogram/analysis/experience/compatibility.html" title="1.5.0">1.5.0</a></td>
</tr>
<tr>
<td>longtap</td>
<td>手指触摸后，超过350ms再离开（推荐使用longpress事件代替）</td>
<td></td>
</tr>
<tr>
<td>transitionend</td>
<td>会在 WXSS transition 或 wx.createAnimation 动画结束后触发</td>
<td></td>
</tr>
<tr>
<td>animationstart</td>
<td>会在一个 WXSS animation 动画开始时触发</td>
<td></td>
</tr>
<tr>
<td>animationiteration</td>
<td>会在一个 WXSS animation 一次迭代结束时触发</td>
<td></td>
</tr>
<tr>
<td>animationend</td>
<td>会在一个 WXSS animation 动画完成时触发</td>
<td></td>
</tr>
<tr>
<td>touchforcechange</td>
<td>在支持 3D Touch 的 iPhone 设备，重按时会触发</td>
<td><a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="1.9.90" href="https://developers.weixin.qq.com/miniprogram/analysis/experience/compatibility.html" title="1.9.90">1.9.90</a></td>
</tr>
</tbody>
</table>
<p><strong>注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 <a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="form" href="https://developers.weixin.qq.com/miniprogram/dev/component/form.html" title="form">form</a> 的<code>submit</code>事件，<a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="input" href="https://developers.weixin.qq.com/miniprogram/dev/component/input.html" title="input">input</a> 的<code>input</code>事件，<a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="scroll-view" href="https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html" title="scroll-view">scroll-view</a> 的<code>scroll</code>事件，(详见各个<a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="组件" href="https://developers.weixin.qq.com/miniprogram/dev/component/" title="组件">组件</a>)</strong></p>
<h3 id="普通事件绑定">普通事件绑定</h3>
<p>事件绑定的写法类似于组件的属性，如：</p>
<pre><view bindtap="handleTap"> Click here! </view>
xml
<p>如果用户点击这个 view ，则页面的 <code>handleTap</code> 会被调用。</p>
<p>事件绑定函数可以是一个数据绑定，如：</p>
<pre><view bindtap="{{ handlerName }}"> Click here! </view>
xml
<p>此时，页面的 <code>this.data.handlerName</code> 必须是一个字符串，指定事件处理函数名；如果它是个空字符串，则这个绑定会失效（可以利用这个特性来暂时禁用一些事件）。</p>
<p>自基础库版本 <a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="1.5.0" href="https://developers.weixin.qq.com/miniprogram/analysis/experience/compatibility.html" title="1.5.0">1.5.0</a> 起，在大多数组件和自定义组件中， <code>bind</code> 后可以紧跟一个冒号，其含义不变，如 <code>bind:tap</code> 。基础库版本 <a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="2.8.1" href="https://developers.weixin.qq.com/miniprogram/analysis/experience/compatibility.html" title="2.8.1">2.8.1</a> 起，在所有组件中开始提供这个支持。</p>
<h3 id="绑定并阻止事件冒泡">绑定并阻止事件冒泡</h3>
<p>除 <code>bind</code> 外，也可以用 <code>catch</code> 来绑定事件。与 <code>bind</code> 不同， <code>catch</code> 会阻止事件向上冒泡。</p>
<p>例如在下边这个例子中，点击 inner view 会先后调用<code>handleTap3</code>和<code>handleTap2</code>(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发<code>handleTap2</code>，点击 outer view 会触发<code>handleTap1</code>。</p>
<pre><view id="outer" bindtap="handleTap1"> outer view <view id="middle" catchtap="handleTap2"> middle view <view id="inner" bindtap="handleTap3"> inner view </view> </view> </view>
xml
<h3 id="互斥事件绑定">互斥事件绑定</h3>
<p>自基础库版本 <a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="2.8.2" href="https://developers.weixin.qq.com/miniprogram/analysis/experience/compatibility.html" title="2.8.2">2.8.2</a> 起，除 <code>bind</code> 和 <code>catch</code> 外，还可以使用 <code>mut-bind</code> 来绑定事件。一个 <code>mut-bind</code> 触发后，如果事件冒泡到其他节点上，其他节点上的 <code>mut-bind</code> 绑定函数不会被触发，但 <code>bind</code> 绑定函数和 <code>catch</code> 绑定函数依旧会被触发。</p>
<p>换而言之，所有 <code>mut-bind</code> 是"互斥"的，只会有其中一个绑定函数被触发。同时，它完全不影响 <code>bind</code> 和 <code>catch</code> 的绑定效果。</p>
<p>例如在下边这个例子中，点击 inner view 会先后调用 <code>handleTap3</code> 和 <code>handleTap2</code> ，点击 middle view 会调用 <code>handleTap2</code> 和 <code>handleTap1</code> 。</p>
<pre><view id="outer" mut-bind:tap="handleTap1"> outer view <view id="middle" bindtap="handleTap2"> middle view <view id="inner" mut-bind:tap="handleTap3"> inner view </view> </view> </view>
xml
<h3 id="事件的捕获阶段">事件的捕获阶段</h3>
<p>自基础库版本 <a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="1.5.0" href="https://developers.weixin.qq.com/miniprogram/analysis/experience/compatibility.html" title="1.5.0">1.5.0</a> 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用<code>capture-bind</code>、<code>capture-catch</code>关键字，后者将中断捕获阶段和取消冒泡阶段。</p>
<p>在下面的代码中，点击 inner view 会先后调用<code>handleTap2</code>、<code>handleTap4</code>、<code>handleTap3</code>、<code>handleTap1</code>。</p>
<pre><view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2"> outer view <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4"> inner view </view> </view>
xml
<p>如果将上面代码中的第一个<code>capture-bind</code>改为<code>capture-catch</code>，将只触发<code>handleTap2</code>。</p>
<pre><view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2"> outer view <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4"> inner view </view> </view>
xml
<h3 id="事件对象">事件对象</h3>
<p>如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。</p>
<p><strong>BaseEvent 基础事件对象属性列表：</strong></p>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>说明</th>
<th>基础库版本</th>
</tr>
</thead>
<tbody>
<tr>
<td><a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="type" href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#type" title="type">type</a></td>
<td>String</td>
<td>事件类型</td>
<td></td>
</tr>
<tr>
<td><a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="timeStamp" href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#timeStamp" title="timeStamp">timeStamp</a></td>
<td>Integer</td>
<td>事件生成时的时间戳</td>
<td></td>
</tr>
<tr>
<td><a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="target" href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#target" title="target">target</a></td>
<td>Object</td>
<td>触发事件的组件的一些属性值集合</td>
<td></td>
</tr>
<tr>
<td><a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="currentTarget" href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#currenttarget" title="currentTarget">currentTarget</a></td>
<td>Object</td>
<td>当前组件的一些属性值集合</td>
<td></td>
</tr>
<tr>
<td><a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="mark" href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#mark" title="mark">mark</a></td>
<td>Object</td>
<td>事件标记数据</td>
<td><a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="2.7.1" href="https://developers.weixin.qq.com/miniprogram/analysis/experience/compatibility.html" title="2.7.1">2.7.1</a></td>
</tr>
</tbody>
</table>
<p><strong>CustomEvent 自定义事件对象属性列表（继承 BaseEvent）：</strong></p>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="detail" href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#detail" title="detail">detail</a></td>
<td>Object</td>
<td>额外的信息</td>
</tr>
</tbody>
</table>
<p><strong>TouchEvent 触摸事件对象属性列表（继承 BaseEvent）：</strong></p>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="touches" href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#touches" title="touches">touches</a></td>
<td>Array</td>
<td>触摸事件，当前停留在屏幕中的触摸点信息的数组</td>
</tr>
<tr>
<td><a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="changedTouches" href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#changedTouches" title="changedTouches">changedTouches</a></td>
<td>Array</td>
<td>触摸事件，当前变化的触摸点信息的数组</td>
</tr>
</tbody>
</table>
<p><strong>特殊事件： <a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="canvas" href="https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html" title="canvas">canvas</a> 中的触摸事件不可冒泡，所以没有 currentTarget。</strong></p>
<h3 id="type">type</h3>
<p>代表事件的类型。</p>
<h3 id="timeStamp">timeStamp</h3>
<p>页面打开到触发事件所经过的毫秒数。</p>
<h3 id="target">target</h3>
<p>触发事件的源组件。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>String</td>
<td>事件源组件的id</td>
</tr>
<tr>
<td><a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="dataset" href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#dataset" title="dataset">dataset</a></td>
<td>Object</td>
<td>事件源组件上由<code>data-</code>开头的自定义属性组成的集合</td>
</tr>
</tbody>
</table>
<h3 id="currentTarget">currentTarget</h3>
<p>事件绑定的当前组件。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>String</td>
<td>当前组件的id</td>
</tr>
<tr>
<td><a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="dataset" href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#dataset" title="dataset">dataset</a></td>
<td>Object</td>
<td>当前组件上由<code>data-</code>开头的自定义属性组成的集合</td>
</tr>
</tbody>
</table>
<p><strong>说明： target 和 currentTarget 可以参考上例中，点击 inner view 时，<code>handleTap3</code> 收到的事件对象 target 和 currentTarget 都是 inner，而 <code>handleTap2</code> 收到的事件对象 target 就是 inner，currentTarget 就是 middle。</strong></p>
<h3 id="dataset">dataset</h3>
<p>在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。</p>
<p>在 WXML 中，这些自定义数据以 <code>data-</code> 开头，多个单词由连字符 <code>-</code> 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：</p>
</li>
<li><code>data-element-type</code> ，最终会呈现为 <code>event.currentTarget.dataset.elementType</code> ；</li>
<li><code>data-elementType</code> ，最终会呈现为 <code>event.currentTarget.dataset.elementtype</code> 。</li>
<li>
<p><strong>示例：</strong></p>
<pre><view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
xml
<pre>Page({ bindViewTap:function(event){ event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法 event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写 } })
xml
<h3 id="mark">mark</h3>
<p>在基础库版本 <a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="2.7.1" href="https://developers.weixin.qq.com/miniprogram/analysis/experience/compatibility.html" title="2.7.1">2.7.1</a> 以上，可以使用 <code>mark</code> 来识别具体触发事件的 target 节点。此外， <code>mark</code> 还可以用于承载一些自定义数据（类似于 <code>dataset</code> ）。</p>
<p>当事件触发时，事件冒泡路径上所有的 <code>mark</code> 会被合并，并返回给事件回调函数。（即使事件不是冒泡事件，也会 <code>mark</code> 。）</p>
<p><strong>代码示例：</strong></p>
<p><a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="在开发者工具中预览效果" href="https://developers.weixin.qq.com/s/7LwTKvmi7woT" title="在开发者工具中预览效果">在开发者工具中预览效果</a></p>
<pre><view mark:myMark="last" bindtap="bindViewTap"> <button mark:anotherMark="leaf" bindtap="bindButtonTap">按钮</button> </view>
xml
<p>在上述 WXML 中，如果按钮被点击，将触发 <code>bindViewTap</code> 和 <code>bindButtonTap</code> 两个事件，事件携带的 <code>event.mark</code> 将包含 <code>myMark</code> 和 <code>anotherMark</code> 两项。</p>
<pre>Page({ bindViewTap: function(e) { e.mark.myMark === "last" // true e.mark.anotherMark === "leaf" // true } })
xml
<p><code>mark</code> 和 <code>dataset</code> 很相似，主要区别在于： <code>mark</code> 会包含从触发事件的节点到根节点上所有的 <code>mark:</code> 属性值；而 <code>dataset</code> 仅包含一个节点的 <code>data-</code> 属性值。</p>
<p>细节注意事项：</p>
</li>
<li>如果存在同名的 <code>mark</code> ，父节点的 <code>mark</code> 会被子节点覆盖。</li>
<li>在自定义组件中接收事件时， <code>mark</code> 不包含自定义组件外的节点的 <code>mark</code> 。</li>
<li>不同于 <code>dataset</code> ，节点的 <code>mark</code> 不会做连字符和大小写转换。</li>
<li>
<h3 id="touches">touches</h3>
<p>touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。 表示当前停留在屏幕上的触摸点。</p>
<h4 id="Touch-对象">Touch 对象</h4>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>identifier</td>
<td>Number</td>
<td>触摸点的标识符</td>
</tr>
<tr>
<td>pageX, pageY</td>
<td>Number</td>
<td>距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴</td>
</tr>
<tr>
<td>clientX, clientY</td>
<td>Number</td>
<td>距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴</td>
</tr>
</tbody>
</table>
<h4 id="CanvasTouch-对象">CanvasTouch 对象</h4>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>说明</th>
<th>特殊说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>identifier</td>
<td>Number</td>
<td>触摸点的标识符</td>
<td></td>
</tr>
<tr>
<td>x, y</td>
<td>Number</td>
<td>距离 Canvas 左上角的距离，Canvas 的左上角为原点 ，横向为X轴，纵向为Y轴</td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="changedTouches">changedTouches</h3>
<p>changedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。</p>
<h3 id="detail">detail</h3>
<p>自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见<a data-link-icon="https://csdnimg.cn/release/blog_editor_html/release2.4.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P758" data-link-title="组件" href="https://developers.weixin.qq.com/miniprogram/dev/component" title="组件">组件</a>定义中各个事件的定义。</p>
<p>点击事件的<code>detail</code> 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。</p>
</li>如果你有好的想法或需求，可以私信我，我这里有很多程序员朋友可以帮你实现你的想法。