Angular mat-table 取消纹波

Question

我有一个 angular-material table 有一个带有 matRipple 效果的可点击行。在 table 中，我有一个按钮作为行之一。单击按钮时，它会发出一个事件，到目前为止，我已经停止了事件传播，这在防止两个元素检测到单击事件方面效果很好。有没有办法仅在单击按钮时暂时取消父行的连锁反应？

Answer 1

涟漪使用 mousedown 和 mouseup 事件，您可以在这两个事件中禁用或打开 parent 的涟漪：

  <div
    class="example-ripple-container mat-elevation-z4"
    matRipple
    [matRippleDisabled]="disabled"
  >
    <button (mousedown)="disabled=true" (mouseup)="disabled=false" mat-button>button</button>
  </div>

Answer 2

使用 stopPropagation 方法简单地停止按钮的 mousedown 事件的进一步传播，如下所示：

<button (mousedown)="$event.stopPropagation()">

Angular mat-table 取消纹波

Angular mat-table cancel ripple

angular-material

angular

angular-material-table