微信小程序bindtap与catchtap的区别详解

 更新时间:2021年09月15日 11:00:30   作者:小胖砸儿  
本文主要介绍了微信小程序bindtap与catchtap的区别详解,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

1、什么是事件

  (1) 事件是视图层到逻辑层的通讯方式。

  (2) 事件可以将用户的行为反馈到逻辑层进行处理。

  (3) 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。

  (4) 事件对象可以携带额外信息,如 id,dataset,touches

2、如何使用事件

  (1) 简单来说就是将事件绑定到组件上面,bindtap和catchtap都属于点击事件,绑定了之后点击组件可以触发这个函数。

  (2) 函数tapName会接受一个参数event,event里面存储了一些函数调用的上下文信息

  (3) 标签元素

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

(4) 绑定事件

Page({
    tapName: function(event) {
        console.log(event)
    }
})

3、bindtap和catchtap的区别

  (1) 相同点:首先他们都是作为点击事件函数,就是点击时触发。在这个作用上他们是一样的,可以不做区分。

  (2) 不同点:他们的不同点主要是bindtap是冒泡的,catchtap是非冒泡的。

4、小程序中事件分为冒泡事件和非冒泡事件。

  (1) 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别bind和catch事件

  (2) bindtap? 事件绑定不会阻止冒泡事件向上冒泡

  (3) catchtap? 事件绑定可以阻止冒泡事件向上冒泡

事件之target&&currentTarget区别

还是采用上面的wxml&&wxss代码, 这次我们修改下js代码的打印值;

// js
  outerTapFn(e) {
    console.log("我是外层父元素被点击了=.=",e);
  },
  innerTapFn(e) {
    console.log("我是内层子元素被点击了=.=",e);
  },

 target对应的是触发事件的源头组件,这个组件有可能是子组件,有可能是父组件,主要是看执行动作的区域。而currentTarget始终对应事件所绑定的组件;

5、例子

1、假如有三个view点击事件都是用的bindtap,三个view是层级包含关系?

<view id="outer" bindtap="out">
    outer view
    <view id="middle" bindtap="middle">
        middle view
        <view id="inner" bindtap="inner">
            inner view
        </view>
    </view>
</view>

2、我么在js里代码是在相对应的事件打印出log,代码如下?

out:function(e){
    console.log("--out bindtap click")
}, middle: function (e) {
    console.log("--middle bindtap click")
}, inner: function (e) {
    console.log("--inner bindtap click")
}

3、bindtap执行结果

  • 点击out view打印出一条log --> out bindtap click
  • 点击middle view打印出两条log --> middle bindtap click--out bindtap click
  • 点击innew view打印出三条log --> inner bindtap click--middle bindtap click--out bindtap click
  • 可以看出bindtap不阻止向上冒泡,所以点击inner一直冒泡到了最外层。

4、如果我们只修改middle view的bindtap为catchtap

  • 点击out view打印出一条log --> out bindtap click(因为没有上层元素故而无法向上冒泡)
  • 点击middle view打印出一条log --> middle bindtap click(catchtap阻止向上冒泡)
  • 点击innew view打印出两条log --> inner bindtap click--middle bindtap click(catchtap阻止向上冒泡)

到此这篇关于微信小程序bindtap与catchtap的区别详解的文章就介绍到这了,更多相关小程序bindtap与catchtap内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解js模板引擎art template数组渲染的方法

    详解js模板引擎art template数组渲染的方法

    art-template 是一个简约、超快的模板引擎。这篇文章主要介绍了详解js模板引擎art template数组渲染的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • js下写一个事件队列操作函数

    js下写一个事件队列操作函数

    异步操作可能会产生你不希望的事件触发顺序。这个问题以前也遇到过,当时没想太多,也就是直接多层嵌套(在ajax返回以后嵌套下一个事件)来解决。
    2010-07-07
  • js仿淘宝和百度文库的评分功能

    js仿淘宝和百度文库的评分功能

    这篇文章主要为大家详细介绍了js仿淘宝和百度文库的评分功能的相关代码和实现思路,具有一定的参考价值,需要的朋友可以参考下
    2016-05-05
  • JavaScript通过改变文字透明度实现的文字闪烁效果实例

    JavaScript通过改变文字透明度实现的文字闪烁效果实例

    这篇文章主要介绍了JavaScript通过改变文字透明度实现的文字闪烁效果,结合完整实例形式分析了javascript基于定时器周期性动态修改页面元素属性的相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • jfinal与bootstrap的登录跳转实战演习

    jfinal与bootstrap的登录跳转实战演习

    这篇文章给大家分享jfinal与bootstrap之间的登录跳转,具体内容包含有点击登录弹出模态框、点击登录确认按钮后的validate、jfinal的validate、jfinal的session管理、ajax请求与返回信息处理、页面间智能跳转。感兴趣的朋友跟着小编一起看看吧
    2015-09-09
  • 详解async/await 异步应用的常用场景

    详解async/await 异步应用的常用场景

    这篇文章主要介绍了详解async/await 异步应用的常用场景,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • JS添加删除一组文本框并对输入信息加以验证判断其正确性

    JS添加删除一组文本框并对输入信息加以验证判断其正确性

    需要添加几组数据到数据库,但是具体几组数据不确定,有客户来填写,所以,这里我用JS进行添加删除子方案,并要对方案输入的正确性加以判断,感兴趣的朋友可以了解下
    2013-04-04
  • event对象获取方法总结在google浏览器下测试

    event对象获取方法总结在google浏览器下测试

    Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态,Event对象的获取方法如下,感兴趣的朋友可以参考下
    2013-11-11
  • JavaScript中的原型链prototype介绍

    JavaScript中的原型链prototype介绍

    这篇文章主要介绍了JavaScript中的原型链prototype介绍,本文讲解了访问原型对象的3种方法,判断两个对象间是否存在原型链关系的方法等,需要的朋友可以参考下
    2014-12-12
  • javascript每日必学之运算符

    javascript每日必学之运算符

    javascript每日必学之运算符,javscript的逻辑中的正序,分支,循环以及一些简单的运算符,想要成为javascript大神的朋友不要错过,阅读一下
    2016-02-02

最新评论