微信小程序之bindtap&&catchtap的区别

前言

      接触微信小程序开发有些时候了, 对基础的知识掌握得不够牢固, 就会致使反复去搜索查找相同知识点, 这是下降工做效率的一种行为, 多总结记忆基础知识才是王道=.=
      接下来, 主要是对微信小程序事件之bindtap&&catchtap作个知识区分巩固~

举例说明

// wxml
<view class="outer" bindtap="outerTapFn">
  <text>外层父元素</text>
  <view class="inner" bindtap="innerTapFn" data-sex="male">内层子元素</view>
</view>

// wxss
.outer{
  width: 500rpx;
  height: 500rpx;
  margin: 0 auto;
  border: 2rpx solid red;
}
.inner{
  width: 300rpx;
  height: 300rpx;
  text-align: center;
  line-height: 300rpx;
  border: 2rpx solid #cccccc;
  margin: 0 auto;
}

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

先copy一波代码, 并在微信开发者工具上看下页面效果

接下来, 按照以下操做点击, 分别看下控制台输出的是什么内容~
A) 点击外层父元素区域
控制台输出: 我是外层父元素被点击了=.=
B) 点击内层子元素区域
控制台输出: 我是内层子元素被点击了=.=       我是外层父元素被点击了=.=

接下来, 将上述代码的bindtap="innerFn"改写成catchtap="innerFn"
按照以下操做点击, 分别看下控制台输出的是什么内容~ A) 点击外层父元素区域
控制台输出: 我是外层父元素被点击了=.=
B) 点击内层子元素区域
控制台输出: 我是内层子元素被点击了=.=

到了这里, 你就应该发现了些微妙之处了, 让咱们总结一下！

总结: 子元素用bindtap绑定事件以后, 会冒泡到父元素; But若子元素用catchtap绑定事件以后,却不会冒泡到父元素;

bindtap跟catchtap的异同

1. 相同点:
   A) 都是点击事件函数,接受一个参数event, 该参数携带一些信息, 如type,currentTarget,target等;
2. 不一样点:
   A) bindtap会冒泡到父元素;
   B) catchtap阻止事件冒泡到父元素;

至此, 关于二者的区别已经阐述完成, 接下来我会进一步剖析currentTarget跟target的区别, 感兴趣的能够继续往下看, 还请多多指教~

事件之target&&currentTarget区别

仍是采用上面的wxml&&wxss代码, 此次咱们修改下js代码的打印值;

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

采用bindtap的方式,点击内层子元素区域, 看下控制台的打印状况:

因为本人学术不精, 暂时没有想到更好的文字去描述此种关系, 故先摘录他人优秀语录以下:

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

最后

      刚开始写文章, 如有任何不对的地方, 还请读者朋友们评论哟,您的点赞就是我最大的动力~