可点击面板内的可点击按钮答案

【问题标题】：Clickable button inside of a clickable panel可点击面板内的可点击按钮
【发布时间】：2015-12-18 20:07:43
【问题描述】：

我在手风琴内部有一个按钮，如下所示：

我通过这样做使整个手风琴头可点击：

<accordion-heading ng-click="isopen=!isopen">
    <div>
        <span class="accordion-header">
            <i class="pull-right glyphicon"
               ng-class="{'glyphicon-chevron-down': accordionOpen,
               'glyphicon-chevron-right': !accordionOpen}"></i>
        </span>
        <button class="delete-button" ng-click="remove()">Delete</button>
    </div>
</accordion-heading>

我遇到的问题是当我单击删除按钮时，remove() 被调用并且手风琴打开/关闭。

当我单击删除按钮时，有没有办法阻止手风琴标题打开/关闭？

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案1】：

你可以使用$event.preventDefault(); $event.stopPropagation();:

<button class="delete-button" ng-click="
  $event.preventDefault(); $event.stopPropagation(); remove()">Delete</button>

点击事件对象可以在 ng-click 中作为$event 访问。 preventDefault 和 stopPropagation 将阻止事件到达手风琴标题点击处理程序。

【讨论】：

【解决方案2】：

您需要阻止事件冒泡到容器中

$scope.remove = function(event) {
  event.preventDefault();
  event.stopPropagation();
  ...
}

和

<button class="delete-button" ng-click="remove($event)">Delete</button>

演示：plnkr

【讨论】：

【解决方案3】：

对我来说，如果我同时使用这两个功能

$event.preventDefault();
$event.stopPropagation();

什么也没发生。所以我只用

 $event.stopPropagation();

效果很好。

【讨论】：