若要在组件中绑定一个事件处理函数,如 onTap
,则需要在该页面的 .js
文件中的 Page
里定义onTap
对应的事件处理函数。
<view id="tapTest" data-hi="Alipay" onTap="tapName">
<view id="tapTestInner" data-hi="AlipayInner">
Click me!
</view>
</view>
在相应的 Page
中定义相应的事件处理函数 tapName
,参数为事件对象 event。
Page({
tapName(event) {
console.log(event);
},
});
控制台输出 event 信息如下所示:
{
"type": "tap",
"timeStamp": 1550561469952,
"target": {
"id": "tapTestInner",
"dataset": {
"hi": "Alipay"
},
"targetDataset": {
"hi": "AlipayInner"
}
},
"currentTarget": {
"id": "tapTest",
"dataset": {
"hi": "Alipay"
}
}
}
使用组件(基础组件、扩展组件和自定义组件)时,组件里有哪些可用的事件取决于组件本身是否支持,支持的事件会在具体组件的文档里明确列出。
事件分为冒泡事件和非冒泡事件:
on
为前缀,当组件上的事件被触发,该事件会向父节点传递。catch
为前缀,当组件上的事件被触发,该事件不会向父节点传递。事件绑定的写法同组件的属性,以 key、value 的形式。
on
或 catch
开头,然后跟上事件的类型,如 onTap
、catchTap
。
<view id="outter" onTap="handleTap1">
view1
<view id="middle" catchTap="handleTap2">
view2
<view id="inner" onTap="handleTap3">
view3
</view>
</view>
</view>
上述代码中,点击 view3 会先后触发 handleTap3 和 handleTap2(因为 tap 事件会冒泡到 view2,而 view2 阻止了 tap 事件冒泡,不再向父节点传递),点击 view2 会触发 handleTap2,点击 view1 会触发 handleTap1。
所有会发生冒泡的事件:
类型 | 触发条件 |
---|---|
touchStart | 触摸动作开始 |
touchMove | 触摸后移动 |
touchEnd | 触摸动作结束 |
touchCancel | 触摸动作被打断,如来电提醒,弹窗 |
tap | 触摸后马上离开 |
longTap | 触摸后,超过500ms再离开 |
在文档使用中是否遇到以下问题
更多建议
匿名提交