支付宝小程序页面逻辑处理之事件(onTap,onTouchStart,onTouchMove,onTouchEnd) - 好文

我们知道在前端开发中事件是交互中最重要的概念。那么在支付宝小程序开发中也不例外，他是交互中非常重要的因素。但是在移动端由于界面和用户动作的原因我们常用的事件就是Tap和Touch事件。

关于这部分的视频教学请大家前往： <https://edu.csdn.net/course/detail/5750>
https://edu.csdn.net/course/detail/5750
<https://edu.csdn.net/course/detail/5750>

事件使用范例

页面代码：
<button id="clickbtn" data-user-name="Mr.Wei" type="primary" size="mini" onTap=
"defaultTap">点击我</button>
js代码：
defaultTap(event) { console.log(event.target.dataset.userName) console.log(
'点击者的姓名为：'); },
这就是tap事件

常用的事件

类型触发条件
touchStart 触摸动作开始
touchMove 触摸后移动
touchEnd 触摸动作结束
touchCancel 触摸动作被打断，如来电提醒，弹窗
tap 触摸后马上离开
longTap 触摸后，超过300ms再离开
事件冒泡

时间冒泡其实解释起来是个非常抽象的东西。我用伪代码给大家解释下
<我是爷爷闹钟响后=“看报”> <我是爸爸闹钟响后=“上班”> <我是儿子闹钟响后=“”上学> </我是儿子> </我是爸爸> </我是爷爷>
那这三代都有一个时间就是“闹钟响后”。也就是说闹钟响后他们要发生相关的动作。
那么冒泡怎么解释呢:
冒泡就好比是家里有一个声音非常大的闹钟放在儿子的房间，只要响了后爷爷、爸爸、儿子都去干自己对应的事情。这显然是不合理的，如果爷爷想要晚起呢？是不行的。
如何处理？
处理的方法是在儿子，爷爷，爸爸的房间各装一个闹钟，自己设定响铃时间。在支付宝小程序中其实就是把onTap之类的事件换成catchTap。也可以理解为，当前组件捕获了tap时间不用向上传递了。

但是有一个问题如果儿子事件是onTap但是爸爸是catchTap那么当tap事件发生在儿子上时其实爸爸的tap事件也被触发了但是爸爸是catch的方式所以爷爷的tap时间不会被触发。

事件对象
defaultTap(event) {

对于每个事件有一个默认的事件对象。也就是event那么事件对象对我们有什么用呢？当然事件对象包含了丰富的信息。包括了tap时间发生的位置，发生在哪个元素上，发生的组件的id等。当然touch事件和tap事件的event数据略有差异，这个不用细说，大家最好的办法是用
console.log(event)
打印然后获得自己想要的数据。
对象结构为：
Object {type: "touchStart", timeStamp: 1535471473292, target: Object,
currentTarget:Object, touches: Array(1)…}
给事件处理器传值

我们知道在原生js中我们可以这样传值
handle(name) { console.log(name) }
但是在支付宝小程序中我们不能这样写。而是要给组件设置data-*属性。例如:
<button data-site="https://blog.csdn.net/marswill" data-user-name="Mr.Wei" type
="primary" size="mini" onTap="defaultTap">点击我</button>
那么在这儿data-site和data-user-name就是我们附加的数据，怎么样获取呢？
handle(event) { console.log(event.target.dataset.site);
console.log(event.target.dataset.userName);//注意中划线要处理成小驼峰法 }
事件这部分比较简单，如果有更多疑惑请查看我的视频教程https://edu.csdn.net/course/detail/5750
<https://edu.csdn.net/course/detail/5750>或者给我发邮件交流。

热门工具换一换