微信小程序开发教程-按钮事件-高级-马育民老师

# 事件

### catch 绑定（阻止冒泡）
```html

<view catchtap="stopBubble"></view>
```
### mut-bind（互斥，仅一个触发，多用于tab栏）
```html
<view mut-bind:tap="tabClick"></view>
```

# 传递参数 data-*

通过 `data-xxx` 自定义参数，JS中 `e.target.dataset` 获取
```html
<button bindtap="btnClick" data-id="100" data-name="测试按钮">传参</button>
```
```js
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`
```html

<view bindtap="parent">
  <button catchtap="child">阻止冒泡</button>
</view>
```
2. **阻止默认行为**：`e.preventDefault()`（滑动、滚动场景）

# 高频实操示例
### 示例1：列表循环点击传索引
```html
<view wx:for="{{list}}" wx:key="id" bindtap="itemClick" data-index="{{index}}">
  {{item.name}}
</view>
```
```js
itemClick(e){
  let idx = e.target.dataset.index
  console.log('点击下标', idx)
}
```

### 示例2：上拉加载更多（scroll-view）
```html
<scroll-view scroll-y bindscrolltolower="loadMore">
  列表内容
</scroll-view>
```
```js
loadMore(){
  // 请求下一页数据
}
```

### 示例3：长按删除
```html
<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

原文出处：http://malaoshi.top/show_1GW3XNvppxh1.html