停止嵌套的涟漪效应

Question

我正在使用 Angular Materia 0.10.1。

我有一个 md-button 嵌套在 md-list-item 中。两个元素在点击时都会触发涟漪效果，当我点击按钮时，会同时在两个元素上触发涟漪效果。我希望仅在按钮或列表元素上产生涟漪，但不要同时出现。

<md-list flex>
    <md-list-item ng-click="a('a')">
      <p>Some name</p>
      <md-button class="md-accent md-raised" ng-click="b('b', $event)">Do something</md-button>
    </md-list-item>
 </md-list>

我使用过$event.stopPropagation()，但它并没有像停止嵌套点击事件那样停止涟漪。

This Plunker 可以更好地展示它。

Answer 1

这似乎是 md-primary 类中内置的东西，以及它如何与列表项一起使用。如果您查看示例，则有一些带有侧按钮的示例没有表现出这种行为

只需将按钮上的类交换为md-secondary，它似乎就可以解决您的问题（尽管现在样式是一个单独的问题）

 <md-button class="md-secondary md-raised" ng-click="b('b')">Do something</md-button>

http://plnkr.co/edit/4fo8u190gpKyoHznVbFM?p=preview

或者，该示例使用md-icon 代替按钮，这似乎也有效。