事件
项目准备
- 创建项目demo3,
- 操作步骤同demo2
- 不过first目录可以改为second目录(也可以将index目录里的子文件的内容删了)
1. 事件的类别
- tap 手指触摸后马上离开
- 触摸事件
- touchstart 手指触摸动作开始
- touchend 手指触摸动作结束
- touchmove 手指触摸后移动
- touchcancel 手指触摸动作被打断,如来电提醒,弹窗
- 持续触摸事件
- longtap 手指触摸后,超过350ms再离开(推荐使用longpress事件代替)
- longpress 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发
- 其他事件详情查看文档
2.事件案例
案例准备
second.wxml
<view class="view1" bindtap="click1">
这个是view1
<view class="view2" bindtap="click2">
这个是view2
<view class="view3" bindtap="click3">
这个是view3
</view>
</view>
</view>
second.js
Page({
data: { },
// view1~3的点击事件
click1:function(){
console.log("点击view1");
},
click2:function(){
console.log("点击view2");
},
click3:function(){
console.log("点击view3");
},
...
})
second.wxss
.view1{
height: 600rpx;
width: 100%;
background-color: #c3f3c3;
}
.view2{
height: 400rpx;
width: 80%;
background-color: #f3c3f3;
}
.view3{
height: 200rpx;
width: 60%;
background-color: gray;
}
2.1 冒泡事件
当我们点击view3时候 发现 view1和view2事件也触发了
点击事件,触摸事件,持续触摸事件都属于冒泡事件,除了这三种事件都属于非冒泡事件。
2.2 事件的绑定
bind绑定 : 普通事件绑定
catch绑定 : 绑定并阻止事件冒泡
区别 : 用 catch 来绑定事件。与 bind 不同, catch 会阻止事件向上冒泡。
2.3 事件的对象
second.js 添加参数event并在控制台输出
...
click2:function(event){
console.log("点击view2");
console.log(event);
},
click3:function(event){
console.log("点击view3");
console.log(event);
},
...
second.wxml 添加id和自定义的数据
<view class="view1" bindtap="click1" id="view1">
这个是view1
<view class="view2" catchtap="click2" id="view2" data-title="view-title2">
这个是view2
<view class="view3" bindtap="click3" id="view3" data-id="view-id3">
这个是view3
</view>
</view>
</view>
currentTarget:当前触发事件的对象,输出都是各自绑定事件的view3和view2
dateset:在view3和view2中各自定义了data-id和data-title 可以在各自的事件中 currentTarget.dataset查看
target: 当前触发事件的源对象,即view3