1、什么是事件

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

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

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

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

2、如何使用事件

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

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

　　(3) 标签元素

　　(4) 绑定事件

3、bindtap和catchtap的区别

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

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

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

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

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

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

5、例子

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

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

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阻止向上冒泡）

一 现象

当父控件的属性同时为：position: relative;z-index: -1;时，子控件无法点击；

position:relative;z-index:-1	其他
无法点击	可点击

二 示例(不可点击)

2.1 布局文件(zindex.wxml)

<view class="page-container1">
  <text bindtap="tapclick">点击</text>
  <button type="primary" bindtap="buttonclick">我是按钮</button>
</view>

2.2 样式文件(zindex.wxss)

.page-container1{

  position: relative;
  z-index: -1;
  text-align: center;
  
}
.page-container1 text{
  background: coral;
  padding: 10rpx 30rpx;
  
}
.page-container1 button{
  z-index: 100;
  margin: 20rpx;
}

2.3 逻辑文件(zindex.js)

Page({

  tapclick(){
    console.log("text点击了按钮");
  },
  buttonclick(){
    console.log("按钮被点击了按钮");
  }
})

三 如何修改

3.1 修改position属性

保持z-index:-1不变时，将position修改为除relative外的其他属性

3.2 修改z-index

保持position:relative不变，将z-index修改为>=0的值

四 参考

• CSDN下载——本项目demo

如果写小程序对二者不理解的,那看到这边博客,将很快帮助到您,

个人总结的一句话:,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡

下面会有一个demo给出解释,

说他们使用的时候先说下微信小程序的事件分类冒泡事件与非冒泡事件

官网上这样规定的

事件分类

事件分为冒泡事件和非冒泡事件：

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

先写一个demo

<view class="intro">

<view id="outer" bindtap="handleTap1">

outer view

<view id="middle" bindtap="handleTap2">

middle view

<view id="inner" bindtap="handleTap3">

inner view

<view id="inner" bindtap="handleTap4">

inner view1

</view>

</view>

</view>

</view>

</view>

给没一个view设置一个bindtap  

在js中打印点击事件

handleTap1:function(){

console.log("=============hly","handleTap1")

},

handleTap2: function () {

console.log("=============hly", "handleTap2")

},

handleTap3: function () {

console.log("=============hly", "handleTap3")

},

handleTap4: function () {

console.log("=============hly", "handleTap4")

},

点击inner view1 的时候看下打印

点击inner view的时候再看下打印

点击middle view的时候在此看下打印

也就是说点击的时候它把最外面的几个也打印了 也是冒泡到其他事件,当然这个时候就是想阻止它了

这个时候点击事件就可以设置catchtab了,

现在把第三个设置catchtap

点击innerview1的时候再看下打印

变成了2个,也就是tap3阻止了其向上冒泡, 当然如果把第四个设置catchtap的话 其也会起到阻止的作用,

至此可以发现,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡