鼠标按下而不是单击时的Angular Material md-button波纹答案

【问题标题】：Angular Material md-button ripple on mousedown instead of click鼠标按下而不是单击时的Angular Material md-button波纹
【发布时间】：2017-06-24 18:38:25
【问题描述】：

我一直在使用Angular Material，但遇到了问题。该文档对很多事情都非常模糊，因此希望有人可以在这里帮助我。这是我想要做的：

目前，如果我把它放到我的 HTML 中，

<button md-button>Click me</button>

涟漪效应发生在 mouseup 上。有什么办法可以将其更改为mousedown？

这是我尝试过的：

<button 
    md-button 
    #nextButton 
    (click)="alertHelloWorld()" 
    (mousedown)="nextButton.focus()">
Hello World! I should ripple on mousedown
</button>

这似乎不起作用。

有什么帮助吗？

【问题讨论】：

波纹是点击的反馈。如果你这样实现它，你会破坏它。
那么你建议我以什么方式获得鼠标按下时的涟漪？
你不应该，波纹是点击的视觉指示。
我没有问我是否应该，我问的是怎么做。如果您能提供帮助，那就太好了。

标签： angular typescript material-design angular-material2

【解决方案1】：

您可以尝试使用MdRipple 指令手动触发它。

组件：

export class YourComponent {
  @ViewChild(MdRipple) ripple: MdRipple;

  rippleButton () {
    this.ripple.launch(0, 0, { centered: true });
  }

模板：

<button md-ripple (mousedown)="rippleButton()"> ... </button>

Ng 模块：

imports: [
  ...
  MdRippleModule,
  ...
],

我还没有测试过代码，但是查看 GitHub 存储库上的文档可以看出这应该可以工作：

MdRipple demo

MdRipple documentation

【讨论】：

谢谢！按钮现在会在 mousedown 上产生涟漪，但也会在 mouseup 上产生涟漪。有没有办法防止默认为 mouseup 或 click 事件？