微信小程序之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的异同

相同点:
A) 都是点击事件函数,接受一个参数event, 该参数携带一些信息, 如type,currentTarget,target等;
不同点:
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始终对应事件所绑定的组件;

最后

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