Angular-当有人单击嵌套按钮时，如何阻止锚定点击发生

Question

我有一个div，它在Angular应用程序中显示用户通知。

div被锚标记包围，单击该锚标记将调用一个将通知标记为已读的函数。

div单独包含一个按钮，该按钮使用户可以转到通知源。

我的问题是-当用户单击按钮时，如何停止将通知也标记为已读的锚点？

<a (click)="toggleNotificationRead()" >
    <div>
      <button (click)="goTo()" >
          Go To
      </button>  
    </div>
</a>

在我的组件中：

goTo() {
  window.location.href = `${this.url}`
};

Answer 1

您需要设置按钮的类型：

<a (click)="toggleNotificationRead()" >
    <div>
      <button type="button" (click)="goTo()" >
          Go To
      </button>  
    </div>
</a>

此外，您可能需要捕获事件并停止传播，但是您不必这样做：

<a (click)="toggleNotificationRead()" >
    <div>
      <button type="button" (click)="goTo($event)" >
          Go To
      </button>  
    </div>
</a>

goTo(event: Event) {
  event.stopPropagation();
  window.location.href = `${this.url}`
};

附带说明，此HTML无效。 内联元素中有块级元素。 我将认真考虑重组此代码。