微信小程序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一波代码, 并在微信开发者工具上看下页面效果

68CF637C-A28D-F70C-AFDE-E043AF4E9BA6.png 接下来, 按照如下操作点击, 分别看下控制台输出的是什么内容~

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的方式,点击内层子元素区域, 看下控制台的打印情况:

138D0A53-7A8D-0DC1-050A-E1A4AB43AE9B.png 由于本人学术不精, 暂时没有想到更好的文字去描述此种关系, 故先摘录他人优秀语录如下:

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

最后

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

收藏 (0)
评论列表
正在载入评论列表...
我是有底线的
为您推荐
    暂时没有数据