08.JS逻辑交互

事件绑定

<view>
  <text bindtap="myClick">点我</text>
</view>

Page({

  myClick(){
    console.log('click');
  }
 
});

 

事件冒泡

view和text都绑定事件

<view bindtap='viewClick'>
  <text bindtap="textClick">点我</text>
</view>

js部分

Page({

  viewClick(){
    console.log('viewClick');
  },

  textClick(){
    console.log('textClick');
  }
 
});

css部分

view{ width: 300rpx; height: 150rpx; border: 1rpx solid red;}
text{ border: 1rpx solid green;}

当我们点击这里

会触发2个click事件，解决的方法是text的bindtap事件改成catchtap

<view bindtap='viewClick'>
  <text catchtap="textClick">点我</text>
</view>

微信小程序提供了很多冒泡事件，我们只学习了 tap，其他的在后面遇到会逐个使用，
这里可以参考微信小程序手册文档，共以下事件：
touchstart: 手指触摸
touchmove: 手指触摸后移动
touchcancel: 手指触摸动作被打断，如来电提醒、弹窗
touchend: 手指触摸动作结束
tap：手指触摸后离开（最常用的一种事件）
longtap: 手指触摸后，超过 250ms 再离开

 

事件对象

1.通过传一个参数得到这个事件对象；

/**
* 用户事件绑定
*/
myTextClick : function (e) {
    console.log(e);
},

2.type 属性表示事件类型

//得到 tag 表示触摸后离开
console.log(e.type);

3.timeStamp 属性表示触发事件经过的毫秒数

//触摸弹起之间的毫秒数
console.log(e.timeStamp);

4.target 属性表示触发的组件

//获取组件的源
console.log(e.target);

其中 id 子属性表示组件的 id，dataset 属性表示 data-开头的自定义属性集合，offsetLeft 和 offsetTop 表示组件坐标。

5.touches 属性

//获取触摸点
console.log(e.touches);

其中 pageX 和 pageY 距离文档左上角的距离，clientX 和 clientY 距离页面可显示区域左上角的距离。