微信小程序--阻止冒泡事件
微信小程序事件的使用方式
- 在组件中绑定一个事件处理函数。
如bindtap
,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
- 在相应的Page定义中写上相应的事件处理函数,参数是event。
Page({
tapName: function(event) {
console.log(event)
}
})
事件绑定和冒泡
事件绑定的写法同组件的属性,以 key、value 的形式。
- key 以
bind
或catch
开头,然后跟上事件的类型,如bindtap
、catchtouchstart
。自基础库版本 1.5.0 起,bind
和catch
后可以紧跟一个冒号,其含义不变,如bind:tap
、、catch:touchstart
。 - value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
bind
事件绑定不会阻止冒泡事件向上冒泡,catch
事件绑定可以阻止冒泡事件向上冒泡。
如在下边这个例子中,点击广州市会先后调用handleTap3
和handleTap2
(因为tap事件会冒泡到 广东省,而 广东省 阻止了 tap 事件冒泡,不再向父节点中国传递),点击 广东省 会触发handleTap2
,点击中国 会触发handleTap1
。
<view id="outer" bindtap="handleTap1">
中国
<view id="middle" catchtap="handleTap2">
广东省
<view id="inner" bindtap="handleTap3">
广州市
</view>
</view>
</view>
在从.js代码中写入
//js
Page({
handleTap1: function(event) {
console.log("中国节点被点击")
},
handleTap2: function(event) {
console.log("广东省节点被点击")
},
handleTap3: function(event) {
console.log("广州市节点被点击")
}
从控制台我们可以看到结果如下:
以此,大家以后就可以正确使用好事件去完成你的功能了。
---------------------------------------------------------------------------
菜鸟初到,如有问题希望可以指出。
微信小程序--阻止冒泡事件的更多相关文章
- 微信小程序开发 [03] 事件、数据绑定和传递
1.事件绑定 在微信小程序中,事件的绑定依附于组件,当事件触发时,就会执行事件对应的处理函数. 我们回到前几章中的例子,将index页面调整为首页(app.json中调整pages数组元素的顺序),此 ...
- 微信小程序中的事件绑定
前言: 微信小程序中的事件绑定和Vue中的事件绑定其实有很多的相似之处,所以如果有过Vue相关的经验,学起来的话还是比较容易的. js代码: // 页面级的js文件必须调用Page函数来注册页面, / ...
- 微信小程序的bindtap事件
在微信小程序中,要想获取元素的属性值,需要用到 bindtap事件,如果想要正确获取到属性值,对属性的命名还有一定要求 如下是正确的方式data-money-Num="9.93": ...
- 微信小程序CheckBox选中事件
1.微信小程CheckBox选中问题 <checkbox-group bindchange="checkboxChange" data-index="{{index ...
- 微信小程序中的事件
事件 说明 bindtap bindload 当图片载入完毕时触发,event.detail = {height, width} bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒 ...
- 微信小程序 - bindtap等事件传参
什么是事件事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, ...
- 微信小程序——获取绑定事件元素的ID
小程序list数据带值跳转,一般直接通过设置item的id来标识或者通过设置键值data-xxxx的方式标识.如下图所示: 解析出来的结果如下图: 我们看到它在元素上绑定了一个checkSchoolL ...
- 微信小程序image bindload事件失效不触发
1.先上代码 <template> <div :class="['img-wrapper', className]"> <img :src=" ...
- 微信小程序之bindtap事件绑定传参
wxml代码: <view class='fen'> <text bindtap='prev' data-page="{{pageDang}}">上一页&l ...
随机推荐
- 修改两行代码,让nginx支持phpinfo模式
Nginx服务器默认不支持pathinfo, 在需要pathinfo支持的程序中(如thinkphp),则无法支持”/index.php/Home/Index/index”这种网址. 网上流传的解决办 ...
- Qt 学习之路 2(61):使用 SAX 处理 XML
Qt 学习之路 2(61):使用 SAX 处理 XML 豆子 2013年8月13日 Qt 学习之路 2 没有评论 前面两章我们介绍了使用流和 DOM 的方式处理 XML 的相关内容,本章将介绍 ...
- Qt 学习之路 2(47):视图选择
Qt 学习之路 2(47):视图选择 豆子 2013年3月28日 Qt 学习之路 2 34条评论 选择是视图中常用的一个操作.在列表.树或者表格中,通过鼠标点击可以选中某一项,被选中项会变成高亮或者反 ...
- C++_标准模板库STL概念介绍5-其他库与总结
C++还提供了其他一些类库,这些类库更加专用. 例如,头文件complex为复数提供了类模板complex,包含用于float.long和long double的具体化. 这个类提供了标准的复数运算以 ...
- docker load error: open /var/lib/docker/tmp/docker-import-347673752/bin/json: no such file or directory
docker save 对应 docker load docker export 对应 docker import 在导出的包的环境中的docker版本跟需要导入的环境中的docker版本不一致也可能 ...
- ES6问题记录--Promise
在读[阮一峰]的 ES6 入门文档的时候,有一段代码是这样的. 文章中,还有一段是这样写的 所以,Promise.resolve(3).finally(()=>{}),解析出来的resolve ...
- 【算法笔记】B1011 A+B 和 C
1011 A+B 和 C (15 分) 给定区间 [−231,231] 内的 3 个整数 A.B 和 C,请判断 A+B 是否大于 C. 输入格式: 输入第 1 行给出正整数 T (≤10 ...
- c# post get
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- vue $index,$key已经移除了
之前可以这样: <ul id="example"> <li v-for="item in items"> {{$index}} {{$k ...
- nodejs 休眠 / 暂停执行指定毫秒
//************** 暂停 / 休眠指定毫秒值 *********************************// milliSeconds 暂停 / 休眠多少毫秒async func ...