- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息，如id, dataset, touches。
- touchstart 手指触摸
- touchmove 手指触摸后移动
- touchcancel 手指触摸动作被打断，如弹窗和来电提醒
- touchend 手指触摸动作结束
- tap 手指触摸后离开
- longtap 手指触摸后后，超过350ms离开
事件绑定的写法同组件的属性，以 key、value 的形式。
- key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart
- value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。 bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
上面简单介绍了小程序事件基础，是时候彰显"事件"的威力：
- 单击(tap)
- 双击(dbtap)
- 长按(longtap)
- 滑动
- 多点触控
单击事件由touchstart、touchend组成,touchend后触发tap事件。
- <view>
- <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
- </view>
- mytouchstart: function(e){ console.log(e.timeStamp + '- touch start')
- },mytouchend: function(e){ console.log(e.timeStamp + '- touch end')
- },mytap: function(e){ console.log(e.timeStamp + '- tap')
- }
2.双击
双击事件由两个单击事件组成，两次间隔时间小于300ms认为是双击；微信官方文档没有双击事件，需要开发者自己定义处理。
- <view>
- <button type="primary" bindtap="mytap">点我吧</button>
- </view>
3.长按
长按事件手指触摸后，超过350ms再离开。
- <view>
- <button type="primary" bindtouchstart="mytouchstart" bindlongtap="mylongtap"
- bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
- </view>
- mytouchstart: function(e){ console.log(e.timeStamp + '- touch start')
- },//长按事件mylongtap: function(e){ console.log(e.timeStamp + '- long tap')
- },mytouchend: function(e){ console.log(e.timeStamp + '- touch end')
- },mytap: function(e){ console.log(e.timeStamp + '- tap')
- }
单击、双击、长按属于点触事件，会触发touchstart、touchend、tap事件，touchcancel事件只能在真机模拟，不多说了。
| 事件 | 触发顺序 |
| 单击 | touchstart → touchend → tap |
| 双击 | touchstart → touchend → tap → touchstart → touchend → tap |
| 长按 | touchstart → longtap → touchend → tap
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。  相关文章
网友点评 热门资讯 关注我们
关注微信公众号，了解最新精彩内容
|
精彩导读
