微信小程序开发详解(五)---微信小程序事件
来源:互联网 发布:从ubuntu启动windows 编辑:程序博客网 时间:2024/04/30 16:11
1:事件冒泡
在微信小程序开发工具中,新建event文件夹,新建文件,在event.wxml中填写如下代码:
<view class="view1" bindtap="view1click" id="view1" data-title="新闻标题" data-id="100">
这里是view 1
<view class="view2" bindtap="view2click" id="view2">
这里是view 2
<view class="view3" bindtap="view3click" id="view3">
这里是view 3
</view>
</view>
</view>
在event.wxss中填写如下代码:
.view1{
height: 500rpx;
width: 100%;
background-color:beige;
}
.view2{
height: 400rpx;
width: 80%;
background-color: red;
}
.view3{
height: 300rpx;
width: 60%;
background-color:aqua;
}
在event.js中增加如下代码:
//事件处理函数
view1click : function(event){
console.log("view1click")
},
view2click : function(){
console.log("view2click")
},
view3click : function(event){
console.log("view3click")
},
编译并运行,然后在模拟器中点击view3区域结果如图1所示:可以看到,除了view3之外,view2和view1的点击事件都响应了,这就是点击事件冒泡
图1
2:阻止事件冒泡
将 <view class="view3" bindtap="view3click" id="view3">改为<view class="view3" catchtap="view3click" id="view3">---即修改为:catchtap
其他代码不变,编译运行,还是点击view3区域,查看日志信息,如图2所示,事件不再冒泡
图2
3:事件信息传入
上述代码中:view1click : function(event)增加打印传入的event事件信息代码如下:编译运行如图3所示:
view1click : function(event){
console.log("view1click")
console.log(event)
}
图3
其中dataset中为自定义的属性,id:100,title: “新闻标题”,这个自定义属性在<view class="view1" bindtap="view1click" id="view1" data-title="新闻标题" data-id="100">设置了
- 微信小程序开发详解(五)---微信小程序事件
- 微信小程序开发经验总结(五)
- 详解微信小程序开发
- 微信小程序框架wxml(五)wxml事件
- 微信小程序开发详解(六)---微信小程序配置
- 微信小程序开发详解(七)---微信小程序APP生命周期
- 微信小程序开发详解(九)---微信小程序布局基础
- 微信小程序开发详解(十)---微信小程序样式基础
- 微信小程序开发手记之五:组件
- 微信小程序开发常见问题FAQ之五
- 微信小程序开发—(五)弹出框
- tp5微信小程序全栈开发-五
- 详解微信小程序开发教程
- 详解微信小程序开发教程
- 详解微信小程序开发教程
- 微信小程序开发流程详解
- 微信小程序开发(五)小程序支付-统一下单
- 微信小程序开发(五)-类似于tab切换
- caffe:LSTM源码分析
- closesocket函数和WSACleanup函数
- GCD 的几个常见的问题分析
- Struts2服务器端的验证(验证框架)
- rabbitmq的安装与启动
- 微信小程序开发详解(五)---微信小程序事件
- 根据窗口句柄来获取进程ID
- BootStrap入门教程 (一)
- jQuery选择器
- 2017年怎样的ui设计师更受互联网企业欢迎?
- Android之解决打包apk方法数不能超过65k的问题
- ASP.NET MVC 4 Mobile 介绍
- 要发就发
- SQL state [72000]; error code [1460]; ORA-01460: 转换请求无法实施或不合理