小程序事件冒泡及阻止事件冒泡

最新推荐文章于 2025-05-28 08:31:36 发布

原创最新推荐文章于 2025-05-28 08:31:36 发布 · 442 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序专栏收录该内容

34 篇文章

订阅专栏

本文详细解析了小程序WXML中事件冒泡机制的工作原理，通过具体代码示例展示了如何使用bindtap和catchtap来控制事件的传播，以及如何在不同层级的视图组件上捕获和响应点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.index.wxml

<!--index.wxml-->
<view class="container">
  <view id="outter" bindtap="handleTap1">
    outer view
    <!-- catchtap阻止冒泡 -->
    <view id="middle" catchtap="handleTap2"> 
      middle view
      <view id="inner" bindtap="handleTap3">
        inner view
      </view>
    </view>
  </view>
</view>

2.index.js

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userId: '123',
  },
  onLoad: function() {},
  onShow: function() {
    // app.globalData.userInfo="wxopen.club";
  },
  tapMessage: function(event){
    console.log(event);
    console.log("data-userid:" + event.target.dataset.userid);
    console.log("data-user-name:" + event.target.dataset.userName);
  },
  handleTap1: function () { console.log("handleTap1"); },
  handleTap2: function () { console.log("handleTap2"); },
  handleTap3: function () { console.log("handleTap3"); },
})