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

Question

我手风琴里面有一个按钮，如下：

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

<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（）并且手风琴打开/关闭。

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

Answer 1

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

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

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

Answer 2

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

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

和

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

演示：plnkr

Answer 3

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

public class MyTask implements Runnable {
    private volatile Thread thread;

    @Override
    public void run() {
        while (!thread.isInterrupted()) {
            System.out.println("First task");
        }
        try {
            Thread.sleep(10);
        } catch (Exception e) {
        }
        while (!thread.isInterrupted()) {
            System.out.println("Second task");
        }
        try {
            Thread.sleep(10);
        } catch (Exception e) {
        }
        while (!thread.isInterrupted()) {
            System.out.println("Third task");
        }
    }

    public Thread start(){
        thread = new Thread(this);
        thread.start();
        return thread;
    }


    public static void main(String[] args) throws InterruptedException {
        Thread t = new MyTask().start();
        Thread.sleep(1000);
        t.interrupt();
        Thread.sleep(1000);
        t.interrupt();
        Thread.sleep(1000);
        t.interrupt();
    }

}

什么都没发生。所以我只使用

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

效果很好。