小程序的点击事件

最新推荐文章于 2024-08-24 00:59:55 发布

选择跳水或自由落体

最新推荐文章于 2024-08-24 00:59:55 发布

阅读量4.1k

点赞数

文章标签：小程序 javascript 开发语言

原文链接：https://juejin.cn/post/6908989532528934919

版权

文章介绍了微信小程序中事件冒泡的概念，以及如何使用bindtap和catchtap来控制事件处理。当需要阻止事件冒泡，可以将bindtap替换为catchtap。此外，还展示了如何通过CSS3的pointer-events属性禁用view的bindtap事件。

摘要由CSDN通过智能技术生成

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

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

<view bindtap='handout'>
   outer
   <view bindtap='handmiddle'>
     middle
     <view bindtap='handinner'>inner</view>
   </view>
 </view>

handout: function () {
  console.log("out");
},
 
handmiddle: function () {
  console.log("middle");
},
 
handinner: function () {
  console.log("inner");
}

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

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

<view bindtap='handout'>
   outer
   <view catchtap='handmiddle'>
     middle
     <view bindtap='handinner'>inner</view>
   </view>
 </view>

点击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>

// 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('点击：')
  },

})

/* 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;
}