微信小程序--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 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...
随机推荐
- 【leetcode】815. Bus Routes
题目如下: We have a list of bus routes. Each routes[i] is a bus route that the i-th bus repeats forever. ...
- Dubbo搭建HelloWorld-搭建服务提供者与服务消费者并完成远程调用(附代码下载)
场景 Dubbo简介与基本概念: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103555224 Dubbo环境搭建-ZooKe ...
- Python前端HTML
一.web标准介绍 web标准: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web标准规范的分类:结构标准.表现标准.行为标准. 结构:html.表示: ...
- react -搭建服务
import 'whatwg-fetch'; import 'es6-promise'; require('es6-promise').polyfill(); import * as common f ...
- php l练习(写着玩)
需求:假设今天24号,今天发表的评论显示几小时前发布,23号发布的显示 昨天几点发布的,再往前的就直接显示年月日. date_default_timezone_set('PRC'); // $crea ...
- 谷歌浏览器安装 socketLog
第一步(本地浏览器安装调试扩展) 下载扩展包并解压 链接:https://pan.baidu.com/s/14df0ewl_3wjRHc8H1jsrWQ提取码:yyu1 打开谷歌浏览器,地址栏输入 c ...
- VS2015 ASP.NET MVC5 EntityFramework6 Oracle 环境篇
//来源:https://www.cnblogs.com/lauer0246/articles/9576940.html Asp.Net MVC EF各版本区别 2009年發行ASP.NET MVC ...
- Excel导入导出工具(简单、好用且轻量级的海量Excel文件导入导出解决方案.)
Excel导入导出工具(简单.好用且轻量级的海量Excel文件导入导出解决方案.) 置顶 2019-09-07 16:47:10 $9420 阅读数 261更多 分类专栏: java 版权声明:本 ...
- Docker 的安装与使用
账号:xcj26密码:X*c*j*5**6**邮箱:**j26@126.com 账号:xichji密码:X*c*j*5**6**邮箱:45*666***@qq.com 摘自:https://b ...
- WebView的基础用法
新建一个WebView项目,然后修改activity_main.xml布局文件中的代码,如下所示: <LinearLayout xmlns:android="http://schema ...