不论是否是微信小程序，应用程序最常用页面交互通讯方式是UI控件事件绑定与事件响应处理函数，这两者分别处在视图层与逻辑层，从微信小程序来说，它分别视图层page.wxml和逻辑层page.js。而在微信小程序中，最常见的UI控件事件绑定属性是bindtap，当然还有另外一个是catchtap。这两个有什么区别与联系呢？

联系的是它们两个都是UI控件事件绑定方法，都可以实现视图层与逻辑层之间的用户动作事件交互，不同的是前者bindtap会把事件回调响应往上传递，俗称冒泡，而后者catchtap不会事件回调响应往上传递，仅在当前UI控件处理后即结束，不会向它的父级控件元素传递。

显而易见，这两种方法对应的场景不同。如果在page页面中某控件元素绑定事件后，但其父级控件元素没有绑定事件，此时用bindtap即可；但其父级控件元素有绑定事件的话，仍旧用bindtap，那么此时点击该控件元素时候，本身的事件响应函数与其父级控件元素的事件响应函数都会被调用执行，这是我们不希望看到的现象，此现象称为“事件穿透”。

不妨看看示例代码，将会更好理解这个“事件穿透”问题，如下：

一、page.wxml

Parent View
        Child View
    

 二、page.js

Page({
    onParentClick: function() {
        console.log('Parent is clicked.')
    },
    onChildClick: function() {
        console.log('Child is clicked.')
    }
})

此时，我们点击“Child View”时，事件响应函数onChildClick和onParentClick都会被执行，这不是我们所希望看到的。我们希望看到的是“Child View”区域点击时，仅事件响应函数onChildClick被执行，而点击除去“Child View”区域之外的“Parent View”的其他区域时，仅onParentClick会被执行。

原文发表于码嗨路书，点击 这里 查看详情，希望文章对您有价值，多谢查阅。