美文网首页MST
微信小程序绑定事件解析

微信小程序绑定事件解析

作者: 后来的猿 | 来源:发表于2018-06-29 21:11 被阅读0次

小程序点击事件有两种bindtap和catchtap,前者不会阻止冒泡事件向上冒泡,后者则可以阻止向上冒泡。

1.事件分类:

冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
区分bindtap和catchtap示例代码:

<view bindtap="onclick1">  
    onclick1
    <view catchtap="onclick2">onclick2</view>  
    <view bindtap="onclick3">onclick3</view>  
</view>  
  
Page({  
    onclick1:function(e){  //输出结果是:onclick1
      console.log("onclick1")  
    },  
    onclick2: function (e) {  //输出结果是:onclick2
      console.log("onclick2")  
    },  
    onclick3: function (e) {  //输出结果:onclick3  onclick1 
      console.log("onclick3")  
    },  
})  

2.列表item事件细节处理

一般在相应的Page定义中写上相应的事件处理函数(参数是event),都能满足需求。

但是,当item中view嵌套层级复杂且内层view不需要绑定事件时,点击item拿到对应的id就需要阻止向上冒泡事件。

我们都知道js中阻止冒泡事件方法:e.stopPropagation()

而小程序中微信对js部分高度封装,是没有上面的方法的,那若何才能阻止事件向上冒泡呢?

且看列子:

<template name="test">
    <view bindtap = 'click1' data-postId="{{id}}">
<view>
    <image src='../images/icon_logo.png'></image>
</view>
    </view>
  </template>
  
<block wx:for="{{testData}}" wx:for-item="item" wx:key="pro">
<template is="test" data="{{...item}}"></template>
</block>

page({
data:{
testData:[{id:'1',title:'Q'}],

      click1: function(e){
    wx.showToast({
    // title: e.target.dataset.postid + "",//点到不同view层上,返回值不一样
    title: e.currentTarget.dataset.postid + "",
     })
}
}
})

分别点击外层和里层view时:e.target.dataset.postid结果分别是1和undefined;

分别点击外层和里层view时:e.currentTarget.dataset.postid结果分别是1和1;

相关文章

  • 微信小程序绑定事件解析

    小程序点击事件有两种bindtap和catchtap,前者不会阻止冒泡事件向上冒泡,后者则可以阻止向上冒泡。 1....

  • 微信小程序 --- 事件绑定

    1.事件类别: tap:点击事件; longtap:长按事件; touchstart:触摸开始; touchend...

  • 微信小程序事件绑定

    一 通过实例来认识 (一) 给出代码 我们直接通过一个实例来引入我们想要讲解的内容: 上述代码就四行,首先是一个 ...

  • 微信小程序事件绑定

    事件绑定 简单的点击事件: 有的组件有自己特有的事件,比如input或者scroll-viewinput有bind...

  • 微信小程序综合

    WXSSWXML导入的两种方式 数据绑定列表渲染事件绑定 小程序的部分内置组件和接口(更新) 小程序的配置文件微信...

  • 微信小程序(文档)-事件

    微信小程序官方文档 一 什么是事件 二 事件的使用方式 三 事件详解 1 事件分类 2 事件绑定 3 事件对...

  • 微信小程序05:wxParse组件,简单用法(html转换)

    资料 微信小程序使用wxParse解析html github:wxParse-微信小程序富文本解析自定义组件,支持...

  • 微信小程序组件探究和应用

    把玩微信小程序组件 微信小程序把玩《二》:页面生命周期,模块化,数据绑定,view组件 微信小程序把玩《三》:sc...

  • 2021-06-08

    今日收获微信小程序双向绑定hidden = "{{offerId==''}}"

  • 小程序绑定微信开放平台帐号

    小程序绑定微信开放平台帐号 小程序绑定微信开放平台帐号后,可与帐号下的其他移动应用、网站应用及公众号打通,通过Un...

网友评论

    本文标题:微信小程序绑定事件解析

    本文链接:https://www.haomeiwen.com/subject/cokzyftx.html