Ionic v1卡片内添加可点击按钮，按钮点击被卡片事件拦截如何解决？

嗨，这个问题我之前帮不少开发者踩过坑——本质就是事件冒泡在搞鬼！按钮的点击事件会顺着DOM树往上传递，最终触发了卡片上的ng-click或者href跳转逻辑。给你几个实用的解决办法：

1. 直接阻止按钮点击事件冒泡 #

这是最直接有效的方案，在按钮的ng-click里调用$event.stopPropagation()，让按钮的点击事件“止步”，不会传到父级的卡片元素上。示例代码如下：

<div class="list card" ng-repeat="(evtKey, evtObj) in someHash">
  <div class="item" ng-click="clickCard(evtKey)">
    <div class="row">
      <div class="col-20 row-center">
        <!-- 你的操作按钮 -->
        <button 
          class="button button-small" 
          ng-click="handleButtonClick(evtKey); $event.stopPropagation()"
        >
          执行操作
        </button>
      </div>
      <!-- 卡片其他内容 -->
    </div>
  </div>
</div>

这里的$event是AngularJS内置的事件对象，stopPropagation()方法会阻止事件继续向上冒泡，这样点击按钮时只会触发handleButtonClick函数，不会触发卡片的clickCard跳转逻辑。

2. 针对卡片用<a>标签href跳转的场景 #

如果你的卡片是用<a>标签的href实现跳转的，同样可以用阻止冒泡的方式解决，代码示例：

<a class="list card item" href="#/detail/{{evtKey}}" ng-repeat="(evtKey, evtObj) in someHash">
  <div class="row">
    <div class="col-20 row-center">
      <button 
        class="button button-small" 
        ng-click="handleButtonClick(evtKey); $event.stopPropagation()"
      >
        执行操作
      </button>
    </div>
    <!-- 卡片其他内容 -->
  </div>
</a>

点击按钮时，事件不会冒泡到<a>标签，自然就不会触发href的页面跳转了。

3. 用Ionic手势指令区分操作（可选） #

如果你的需求允许区分“点击卡片跳转”和“长按按钮操作”，可以用Ionic v1提供的手势指令（比如on-hold），这样两种操作不会冲突：

<button class="button button-small" on-hold="handleButtonClick(evtKey)">
  长按执行操作
</button>

这种方式适合需要避免误触的场景，不过如果就是要点击按钮触发操作，还是前两种方法更直接。

最后提醒一下：记得在对应的AngularJS控制器里定义好按钮点击的处理函数（比如上面的handleButtonClick），不然按钮点击会没有反应哦！

内容的提问来源于stack exchange，提问作者Sanjay Tibrewal