Question

我有一个角材料表，其中的可单击行具有matRipple效果。在表中，我有一个按钮作为行之一。单击该按钮时，它将发出一个事件，到目前为止，我已经停止了事件传播，并且可以很好地防止两个元素都检测到click事件。是否只有在单击按钮时才可以暂时消除父行的波纹效果？

Answer 1

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

  <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()">

角形垫台消除波纹

2 个答案: