angularjs - 可点击面板内的可点击按钮

Question

我在 Accordion 里面有一个按钮，像这样:



我通过这样做使整个 Accordion 头可点击:

<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() 并且 Accordion 打开/关闭。

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

Answer 1

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

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

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