uniapp点击事件冒泡

### 解决 UniApp 中点击事件冒泡问题

在 UniApp 开发过程中，遇到多个嵌套元素拥有不同点击行为的情况时，可能会发生点击子元素的同时也触发了父元素的点击事件。为了有效防止这种情况的发生，在编写 Vue 组件模板时可以利用 `.stop` 修饰符来阻止事件冒泡。

对于具体场景描述的需求：点击整个卡片可跳转详情页；而点击特定按钮则执行其他操作而不触发卡片整体的跳转逻辑。解决方案是在相应按钮上添加 `@click.stop="handler"` 的形式[^4]。

#### 实现代码示例：

<template>
  <view class="card" @click="goToDetail">
    <!-- 卡片内容 -->
    
    <button type="primary" @click.stop="handleButtonAction">特殊按钮</button>

  </view>
</template>

<script>
export default {
  methods: {
    goToDetail() {
      console.log('即将跳转到详情页');
      // 跳转至详情页的具体实现...
    },
    handleButtonAction(){
      console.log('仅触发此按钮的操作');
      // 特殊按钮对应的业务逻辑...
    }
  }
}
</script>

通过上述方式定义组件结构与交互逻辑，能够确保当用户点击 "特殊按钮" 时只调用该按钮关联的方法 (`handleButtonAction`) 并且不会继续向上传播从而意外触发展示更多细节的功能(`goToDetail`)[^3]。