微信小程序--catchtap&bindtap
转自:https://www.cnblogs.com/heron-yu/p/7244481.html
转自:http://blog.csdn.net/xiaochun365/article/details/69948578
bindtap元素绑定事件,父节点绑定事件会冒泡
catchtap不会冒泡,仅在当前元素触发
//wxml
<view class="view1" bindtap="view1">
<view class="view2" bindtap="view2">
<view class="view3" catchtap="view3"></view>
</view>
</view>
//js
Page({
data: {
}, view1: function () {
console.log("---view1 bindtap click")
}, view2: function () {
console.log("--view2 bindtap click")
}, view3: function () {
console.log("-view3 catchtap click ")
}
})
//点击view3
-view3 catchtap click
//点击view2
--view2 bindtap click
---view1 bindtap click
//点击view1
---view1 catchtap click
点击view1,因为是bindtap他会向父节点传递,因为他本身没有父节点所以只打印的view1 bindtap click
微信小程序--catchtap&bindtap的更多相关文章
- 微信小程序组件——bindtap和catchtap的区别
了解知识点 DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的.当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事 ...
- 微信小程序的bindtap事件
在微信小程序中,要想获取元素的属性值,需要用到 bindtap事件,如果想要正确获取到属性值,对属性的命名还有一定要求 如下是正确的方式data-money-Num="9.93": ...
- 【微信小程序】--bindtap参数传递,配合wx.previewImage实现多张缩略图预览
本文为原创随笔,纯属个人理解.如有错误,欢迎指出. 如需转载请注明出处 在微信小程序中预览图片分为 a.预览本地相册中的图片. b.预览某个wxml中的多张图片. 分析:实质其实是一样的.都是给wx. ...
- 微信小程序:bindtap等事件传参
事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, data ...
- 微信小程序之bindtap事件绑定传参
wxml代码: <view class='fen'> <text bindtap='prev' data-page="{{pageDang}}">上一页&l ...
- 微信小程序:bindtap方法传参
1.wxml <view bindtap="pay_again" data-name="{{orderList.jid}}" data-fee=" ...
- 微信小程序探究
前段时间比较流行的微信小程序,因为一直没有所谓内测码也没具体关注.拖到现在正好借组内分享的时机来仔细了解一下微信小程序.了解一个新的事物无外乎从是什么(本质),怎么用(具体用法),为什么用(优缺点)来 ...
- 微信小程序学习
官方网站 https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 项目结构介绍 -- MINA框架 https://mp.weixin.qq.com/ ...
- 微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)
最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...
随机推荐
- Ruby笔记
1.数组遍历方法总结 array = (1..10).to_a length = array.length length.times do t print "#{array[t]} &quo ...
- qt5--对话框
颜色对话框——QColorDialog: 需要 #include <QColorDialog> QColor color=QColorDialog::getColor(QColor(, ...
- Linux命令-文件传输
Linux命令-文件传输 Linux lprm命令 Linux lprm命令用于将一个工作由打印机贮列中移除 尚未完成的打印机工作会被放在打印机贮列之中,这个命令可用来将常未送到打印机的工作取消.由于 ...
- java命令--jstack 工具【转载】
一.介绍 jstack是java虚拟机自带的一种堆栈跟踪工具.jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项&qu ...
- 解决eclipse无法部署工程到tomcat运行的问题
当在tomcat想加入工程时在列表没发现要的项目时, 引起这个错误提示的原因是:项目里的.project文件和.settings文件的缺失或者错误.而不能适用于现在的tomcat. 解决办法如下: 右 ...
- 从零开始学习vue(2)
一.vue实例 每个vue应用都是通过Vue构造函数创建的一个新的实例开始的: var vm = new Vue({ //选项对象 }) 在这其中vm(viewModel的简称)通常都表示vue实例的 ...
- WebView的基础用法
新建一个WebView项目,然后修改activity_main.xml布局文件中的代码,如下所示: <LinearLayout xmlns:android="http://schema ...
- Contacts解析
显示联系人相关类packages/apps/Contacts/src/com/android/contacts/activities/PeopleActivity.javapackages/apps/ ...
- echarts_04
通过ajax加载本地文件: 1.http://www.cnblogs.com/qjqcs/archive/2016/09/07/5850282.html 2.http://blog.csdn.net/ ...
- 取消 vue 的严格模式
vue 中 有个 ' use strict ' 为严格模式,导致我们的一些东西都不可以使用,使用便会报错 解决方法:我们下载 babel-plugin-transform-remove-strict- ...