微信小程序按钮事件是什么？如何处理微信小程序按钮事件

　　微信小程序按钮事件有很多种，但是迄今为止还有很多人对于小程序按钮事件本身都不了解的，接下来小编就为大家详细介绍一下微信小程序按钮事件是什么，以及要如何处理。

　　》》》什么是事件

　　事件是视图层到逻辑层的通讯方式。

　　事件可以将用户的行为反馈到逻辑层进行处理。

　　事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

　　事件对象可以携带额外信息，如id, dataset, touches。

　　事件的使用方式

　　在组件中绑定一个事件处理函数。

　　如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

　　Click me!

　　在相应的Page定义中写上相应的事件处理函数，参数是event。

　　?

　　5Page({

　　tapName: function(event) {

　　console.log(event)

　　}

　　})

　　可以看到log出来的信息大致如下：

　　?

　　"type": "tap",

　　"timeStamp": 1252,

　　"target": {

　　"id": "tapTest",

　　"offsetLeft": 0,

　　"offsetTop": 0,

　　"dataset": {

　　"hi": "MINA"

　　}

　　},

　　"currentTarget": {

　　"id": "tapTest",

　　"offsetLeft": 0,

　　"offsetTop": 0,

　　"dataset": {

　　"hi": "MINA"

　　}

　　},

　　"touches": [{

　　"pageX": 30,

　　"pageY": 12,

　　"clientX": 30,

　　"clientY": 12,

　　"screenX": 112,

　　"screenY": 151

　　}],

　　"detail": {

　　"x": 30,

　　"y": 12

　　}

　　}

　　事件详解

　　事件分类

　　事件分为冒泡事件和非冒泡事件：

　　冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

　　非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

　　》》》事件分类

　　touchstart 手指触摸

　　touchmove 手指触摸后移动

　　touchcancel 手指触摸动作被打断，如弹窗和来电提醒

　　touchend 手指触摸动作结束

　　tap 手指触摸后离开

　　longtap 手指触摸后后，超过350ms离开

　　》》》事件绑定

　　事件绑定的写法同组件的属*，以 key、value 的形式。

　　key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart

　　value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。 bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

　　上面简单介绍了小程序事件基础，是时候彰显"事件"的威力：

　　单击(tap)

　　双击(dbtap)

　　长按(longtap)

　　滑动

　　多点触控

　　1.单击

　　单击事件由touchstart、touchend组成,touchend后触发tap事件。

　　?

　　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认为是双击;微信官方文档没有双击事件，需要开发者自己定义处理。

　　?

　　3.长按

　　长按事件手指触摸后，超过350ms再离开。

　　?

　　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

　　4.滑动

　　手指触摸屏幕并移动，为了简化起见，下面以水平滑动和垂直滑动为例。 滑动事件由touchstart、touchmove、touchend组成

　　微信小程序按钮事件的内容相信大家仔细看一遍就能够了解了，但是如何处理微信小程序按钮事件，可能大家还需要对照以上流程操作一遍，更多相关资料请关注微信小程序素材网。

　　微信小程序按钮居中怎么弄

　　微信小程序按钮禁止设置方法

　　微信小程序按钮怎么分享?