微信小程序冒泡事件及其阻止方法实例分析

本文实例讲述了微信小程序冒泡事件及其阻止方法。分享给大家供大家参考，具体如下：

事件的类别分为几种：

  • 点击事件：tap
  • 长按事件：longtap
  • 触摸事件：touchstart； touchend；touchcancel；touchmove
  • 其他：input；submit....

其中前三类是冒泡事件，其他的称为非冒泡事件。

写一个简单的例子，代码就不一一贴出来了，WXML的文件如下：

<view class='redview' bindtap='redclick'>
 红色
 <view class='yellowview' bindtap='yellowclick'>
  黄色
  <view class='blueview' bindtap='blueclick'>
   蓝色
  </view>
 </view>
</view>

效果如图：

当我点击最内层的蓝色方框的时候，打印的结果如下：

冒泡事件的机制是先打印点击的蓝色，也就是最内层，然后依次打印第二层和第三层。假设点击黄色层，会依次打印出黄色和红色。点击红色时只打印红色。

但是也可以阻止冒泡事件的发生，其实很简单，直接把bindtap改为catchtap即可。

<view class='redview' bindtap='redclick'>
 红色
 <view class='yellowview' bindtap='yellowclick'>
  黄色
  <view class='blueview' catchtap='blueclick'>
   蓝色
  </view>
 </view>
</view>

这样你点击最内层的蓝色，只会打印蓝色而不会打印出黄色和红色了。但是点击黄色还是会打印黄色和红色，这个时候再把黄色页面的bindtap改成catchtap就可以了。

友情提示：有一部分标签是默认在最上层的，比如video，想在video上放一个view然后设置catchtap将video覆盖是无效的。

希望本文所述对大家微信小程序开发有所帮助。

赞 (0)

相关推荐

  • 微信小程序 页面滑动事件的实例详解

    微信小程序--页面滑动事件 wxml: <view id="id" class = "ball" bindtap = "handletap" bindtouchstart = "handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend" style = "width : 10

  • 微信小程序 实现拖拽事件监听实例详解

    微信小程序 实现拖拽事件监听实例详解

    微信小程序 拖拽监听功能: 在软件开发或者 APP应用开发的时候,经常会遇到拖拽监听,最近自己学习微信小程序的知识,就想实现这样的拖拽效果,这里就记录下. 需要做个浮在scroll-view之上的button.尝试了一下. 上GIF: Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标. 1.index.wxml ../images/gundong.png" bindtap="ballClickEvent" style="

  • 微信小程序 冒泡事件原理解析

    微信小程序 冒泡事件原理解析

    在微信小程序的事件分为冒泡事件和非冒泡事件: 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递. WXML的冒泡事件列表: 类型 触发条件 最低版本 touchstart 手指触摸动作开始   touchmove 手指触摸后移动   touchcancel 手指触摸动作被打断,如来电提醒,弹窗   touchend 手指触摸动作结束   tap 手指触摸后马上离开   longpress 手指触摸后,超过350ms再离开

  • 微信小程序bindtap事件与冒泡阻止详解

    bindtap就是点击事件 在.wxml文件绑定: <text id='textId' data-userxxx='100' bindtap='tapMessage'>cilck here</text> 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行 在后台.js文件中定义tapMessage函数: //index.js Page({ data: { mo: 'Hello World!!', userid : '1234',

  • 微信小程序之绑定点击事件实例详解

    微信小程序之绑定点击事件实例详解

    微信小程序之绑定点击事件实例详解 微信小程序出来那么久了,趁着有时间自己研究一下,前阶段看一了一下,但是不允许个人注册,现在已经对个人开放了,所以爱好者们可以自己研究了. 首先,我们看一下如何添加底部的标签栏:在app.json里操作 { "pages":[ //在这里添加页面的路径 "pages/index/index", "pages/logs/logs", "pages/home/home" ], "windo

  • 微信小程序 动态绑定数据及动态事件处理

    微信小程序 动态绑定数据及动态事件处理 关键核心代码 <image class="midimage" data-Type="{{item.Type}}" data-BillCode="{{item.BillCode}}" data-src="{{item.imgurl}}" src="{{item.imgurl}}" mode="scaleToFill" bindtap="

  • 微信小程序 页面跳转事件绑定的实例详解

    微信小程序 页面跳转事件绑定的实例详解 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, dataset, touches. 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数 <view bindtap="view"> <text bindtap

  • 微信小程序冒泡事件及其阻止方法实例分析

    微信小程序冒泡事件及其阻止方法实例分析

    本文实例讲述了微信小程序冒泡事件及其阻止方法.分享给大家供大家参考,具体如下: 事件的类别分为几种: 点击事件:tap 长按事件:longtap 触摸事件:touchstart: touchend:touchcancel:touchmove 其他:input:submit.... 其中前三类是冒泡事件,其他的称为非冒泡事件. 写一个简单的例子,代码就不一一贴出来了,WXML的文件如下: <view class='redview' bindtap='redclick'> 红色 <view

  • 微信小程序地图定位的实现方法实例

    微信小程序地图定位的实现方法实例

    目录 前言 方法如下 总结: 前言 地图定位这个功能大家都很熟悉吧,那微信小程序中要怎么实现地图定位呢,其实非常简单,没有大家想象中那么难,看完本篇文章,你也可以轻松实现这个小功能哦. 方法如下 1.首先呢你要有一个方法去触发这个点击事件,下面已经写好啦,非常简单的两行代码. <input placeholder="请选择地址..." value="{{mapName}}"></input> <button bindtap="

  • 微信小程序webView嵌入H5的方法实例

    微信小程序webView嵌入H5的方法实例

    前言 微信小程序提供了新的开放能力!它终于开放了在小程序中内嵌HTML页面的功能!从微信小程序基础库1.6.4开始,我们就可以在小程序内放置一个<web-view>组件来链接我们的HTML页面了.在这之前,我们在小程序中没有办法整合我们已有的HTML程序(比如HTML5文章系统,商城系统等),只能使用小程序的方式重新开发一套,现在有了<web-view>就可以方便的集成这些网页系统,为我们减少了可观的工作量. tips:个人类型的小程序暂不支持web-viwe引用H5,同时需要在小

  • 微信小程序dom操作的替代思路实例分析

    本文实例讲述了微信小程序dom操作的替代思路.分享给大家供大家参考,具体如下: 微信小程序无法操作dom,这意味着之前js中的各种习惯方法必须换一种思路实现 在尝试了几类情况后,发现部分情况下可以用{{}}变量绑定来实现效果. 比如: 一.实现view的显示和隐藏 在js中的data设置变量 bottomHidden1:"block": 然后在wxml中的view中设置<view class="bottom1" style="display:{{bo

  • 微信小程序bindinput与bindsubmit的区别实例分析

    本文实例讲述了微信小程序bindinput与bindsubmit的区别.分享给大家供大家参考,具体如下: 实际上的话,bindinput还有bindsubmit是没有任何的可比性的,但是两者还是常常被人一起比较,为啥? 比如一个简单的搜索框,你是愿意选择使用bindinput还是使用bindsubmit?,虽然一个是表单,一个是文本输入框,但是两者都有一个共同点,就是可以去获取到用户的输入信息.这个时候,问题来了,区别在哪儿? 最简单的一段代码在下面: <form bindsubmit='inp

  • 微信小程序 按钮滑动的实现方法

    微信小程序 按钮滑动的实现方法

    微信小程序 按钮滑动的实现方法 一.先看东西 滑动前 滑动后 二.再上代码 index.wxml <view class="content"> <view class="sliderContent"> <input placeholder="验证码" placeholder-class="input-placeholder" disabled="{{disabled}}" /&

  • 微信小程序传值以及获取值方法的详解

    微信小程序传值以及获取值方法,传值有两种方法,对应也有获取值得方法, 1.设置id的方法标识跳转后传递的参数值: 2.通过使用data - xxxx 的方法来标识要传递的值 微信小程序设置id的方法标识来传值 在要跳转的item处,设置一个id并给当前的id赋值上对应的key值,比如一部电影的id(后面带着id去下一个页面查询,详细信息)如: 后我们在js的bindtap的响应事件中获取,并传递到下一个界面中: 获取到id传的值 通过e.currentTarget.id;获取设置的id值,并通过

  • 微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题

    首先我们在pages文件夹下创建components目录用于存放自定义组件.如图所示,以我创建的dialog组件为例,自定义组件的格式与页面一样,分为4个文件. 图1 图2 如上图2所示,假如index页面有一个按钮触发点击事件后弹出dialog,并且当点击某个部门时,将dialog关闭,并将部门名称与红色标题同步. 一.首先把dialog组件的样式写好,并在index页面相应的位置引用.以下就是代码啦(分别为:wxml.wxss.js.json) <view class='wx_dialog_

  • 微信小程序获取网络类型的方法示例 原创

    微信小程序获取网络类型的方法示例 原创

    本文实例讲述了微信小程序获取网络类型的方法.分享给大家供大家参考,具体如下: 这里主要演示通过wx.getNetworkType获取当前网络类型的操作方法.代码如下: index.js: Page({ /** * 页面的初始数据 */ data: { netType:'' }, /** * 生命周期函数--监听页面加载 */ onLoad: function () { var that = this; try { wx.getNetworkType({ success: function(res

随机推荐