事件

catch 绑定（阻止冒泡）

<!-- 点击不向上冒泡 -->
<view catchtap="stopBubble"></view>

mut-bind（互斥，仅一个触发，多用于tab栏）

<view mut-bind:tap="tabClick"></view>

传递参数 data-*

通过 data-xxx 自定义参数，JS中 e.target.dataset 获取

<button bindtap="btnClick" data-id="100" data-name="测试按钮">传参</button>

Page({
  btnClick(e) {
    console.log(e.target.dataset.id) // 100
    console.log(e.target.dataset.name) // 测试按钮
  }
})

事件对象 Event 详解

触发函数默认接收参数 e，核心属性：

1. e.target：触发事件的源组件（带data参数）
2. e.currentTarget：绑定事件的组件（catch/bind所在标签）
3. e.detail：事件携带数据（输入值、表单数据、滚动距离等）
4. e.touches：当前屏幕所有触摸点（多指操作）
5. e.timeStamp：事件触发时间戳

阻止冒泡&阻止默认行为

1. 阻止冒泡：把 bind 改为 catch

   <!-- 内层点击不会触发外层view的tap -->
   <view bindtap="parent">
   <button catchtap="child">阻止冒泡</button>
   </view>
   

2. 阻止默认行为：e.preventDefault()（滑动、滚动场景）

高频实操示例

示例1：列表循环点击传索引

<view wx:for="{{list}}" wx:key="id" bindtap="itemClick" data-index="{{index}}">
  {{item.name}}
</view>

itemClick(e){
  let idx = e.target.dataset.index
  console.log('点击下标', idx)
}

示例2：上拉加载更多（scroll-view）

<scroll-view scroll-y bindscrolltolower="loadMore">
  列表内容
</scroll-view>

loadMore(){
  // 请求下一页数据
}

示例3：长按删除

<view bindlongpress="delItem" data-id="{{item.id}}">条目</view>

常见坑点

1. data-参数自动转小写：data-userId → dataset.userid
2. 冒泡区分 target / currentTarget：循环中点击子元素target是内部标签
3. form提交必须给input加name，否则拿不到值
4. 原生组件（map/camera）部分事件不支持catch冒泡
5. 长按压longpress不会同时触发tap

原文出处：/show_1GW3XNvppxh1.html