小程序的点击事件_小程序点击事件

一：微信小程序bindtap点击事件与事件冒泡

原文链接
事件冒泡就是指嵌套事件发生，如果多层标签嵌套, 里层事件发生后, 其外层会相应发生, 如:

<view bindtap='handout'>
   outer
   <view bindtap='handmiddle'>
     middle
     <view bindtap='handinner'>inner</view>
   </view>
 </view>
1
2
3
4
5
6
7

handout: function () {
  console.log("out");
},
 
handmiddle: function () {
  console.log("middle");
},
 
handinner: function () {
  console.log("inner");
}
1
2
3
4
5
6
7
8
9
10
11

点击inner三个事件都执行, 点击middlek执行handmiddle和handout, 点击out只执行handout 阻止事件冒泡行为: 将bindtap改为catchtap就行了。

catchtap只会触发自身的点击事件，会阻断自身的冒泡行为，可以理解为，不管是不是自身触发的点击行为, 传到我这里, 我就将它阻断(不再向上传递)。如：

<view bindtap='handout'>
   outer
   <view catchtap='handmiddle'>
     middle
     <view bindtap='handinner'>inner</view>
   </view>
 </view>
1
2
3
4
5
6
7

点击inner, 执行的是handinner和handmiddle两个函数，因为midd的catchtap阻止了事件冒泡行为，所以outer不会执行。

二：如何禁止掉view的bindtap事件？

解决这个问题: 借助了css3中的一个非常好用的特性 在指定的类上添加一个pointer-events: none就可以了的。

代码如下：

<!--pages/news/index.wxml-->
<view>
  <text>消息页</text>
   <view class="btn {{is_able ? 'btn_able':'btn-disabled'}}" bindtap="handeBtn">{{is_able ? '可以点击':'禁用按钮'}}</view>
</view>
1
2
3
4
5

// pages/news/index.js
Page({


  data: {
    is_able: true
  },

  onLoad: function (options) {

  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  handeBtn: function() {
    this.setData({
      is_able: !this.data.is_able
    })
    console.log('点击：')
  },

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/* pages/news/index.wxss */

.btn-disabled {
  pointer-events: none; /*微信小程序view禁掉bindtap事件,阻止点击,它是css3的一个属性，指定在什么情况下元素可以成为鼠标事件的target（包括鼠标的样式）*/
  background-color: powderblue;
}
.btn_able {
   background-color: blue;
}
.btn {
  width: 50px;
  height: 50px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13