父母的md-ink-ripple不应该被孩子触发

Question

点击像md-ink-ripple这样的子元素时，是否可以在父元素上禁用<md-checkbox>？

http://codepen.io/anon/pen/QKwkOB

<md-card md-ink-ripple layout-align="center center">
    <md-checkbox>
        Test
    </md-checkbox>
</md-card>

当我点击<md-checkbox>时，它不应该触发md-ink-ripple，因为它附加了一个操作（它是一个复选框）。如果我点击文本（不是复选框），它仍应触发md-ink-ripple。

这可能吗？

Answer 1

这是一种做法 - CodePen

我注意到涟漪效应在鼠标按下时开始，因此可以停止在md-checkbox上传播。

标记

<div ng-controller="AppCtrl" ng-app="MyApp" layout="row" layout-align="center center" id="main">
  <md-card md-ink-ripple layout-align="center center">
    <div layout="row" layout-align="start center">
      <md-checkbox ng-mousedown="checkBoxMouseDown($event)">
      </md-checkbox>
      Clicking this should not md-ink-ripple my parent md-card
    </div>
    </md-card>
</div>

JS

angular.module('MyApp',['ngMaterial']).controller('AppCtrl', function($scope, $timeout) {
  $scope.checkBoxMouseDown = function (event) {
    event.stopPropagation();
  }
});