angularjs - 父级上的 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();
  }
});