找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序--阻止冒泡事件

[复制链接]
查看: 84|回复: 0
最佳答案
0 

13

主题

17

帖子

754

积分

专家路上

积分
754
 楼主| 发表于 2017-10-11 14:46:04 | 显示全部楼层 |阅读模式
微信小程序--阻止冒泡事件

在组件中绑定一个事件处理函数。

如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
  1. <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
复制代码

在相应的Page定义中写上相应的事件处理函数,参数是event。
  1. Page({
  2.   tapName: function(event) {
  3.     console.log(event)
  4.   }
  5. })
复制代码

事件绑定和冒泡

事件绑定的写法同组件的属性,以 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。
  1. <view id="outer" bindtap="handleTap1">
  2.   中国
  3.   <view id="middle" catchtap="handleTap2">
  4.     广东省
  5.     <view id="inner" bindtap="handleTap3">
  6.       广州市
  7.     </view>
  8.   </view>
  9. </view>
复制代码

在从.js代码中写入
  1. //js
  2. Page({
  3.     handleTap1: function(event) {
  4.       console.log("中国节点被点击")
  5.     },
  6.     handleTap2: function(event) {
  7.       console.log("广东省节点被点击")
  8.     },
  9.     handleTap3: function(event) {
  10.       console.log("广州市节点被点击")
  11.     }
  12.   })
复制代码

从控制台我们可以看到结果如下:
4-481454600.png

以此,大家以后就可以正确使用好事件去完成你的功能了。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com