本质上小部件框架不是基于 Webview 容器渲染的,事件和传统的 HTML5 事件有一些差异。
说明:本文档适用于小部件3.0
属性 |
类型 |
描述 |
是否支持 |
type |
String |
事件类型。 |
是 |
timeStamp |
Integer |
表示从加载文档到创建事件的毫秒数。 |
是 |
target |
Object |
dataset 在组件中可以定义数据,这些数据将会通过事件传递给逻辑层。 以 data- 开头,由连字符 - 连接多个单词,所有字母必须小写,如 data-element-type,最终会在 event.target.dataset 中会将连字符转成驼峰 elementType。 |
是 |
属性 |
类型 |
描述 |
是否支持 |
id |
String |
事件源组件的 id。 |
否,目前暂不支持,720补充 |
tagName |
String |
当前组件的类型。 |
否,目前暂不支持,720补充 |
dataset |
Object |
绑定事件的组件上由 开头的自定义属性的集合。 |
是 |
targetDataset |
Object |
实际触发事件的组件上由 开头的自定义属性的集合。 |
否,目前暂不支持,720补充 |
注:目前模拟器的事件结构和真机有所差异,后续会修复此bug,请先以客户端实际效果为准。
index.axml
<view> <view onTap="onTap" data-user-id="778899" id="112233"> <text>onTap {{count}}</text> </view> </view>
index.js
Component({ data: { count: 0 }, onInit() { }, didMount() { }, methods: { onTap(e) { console.log(e.type); // click console.log(e.timeStamp); // 1655968197906 console.log(e.target.dataset); // {"dataUserId": "778899"} this.setData({ count: this.count + 1 }); } } })
事件冒泡模型请参考 W3C 冒泡模型。