父级上的 md-ink-ripple 不应由子级触发

Question

当我单击 <md-checkbox> 之类的子元素时，是否可以在父元素上禁用 md-ink-ripple？

<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();
  }
});

父级上的 md-ink-ripple 不应由子级触发

md-ink-ripple on parent should not be triggered by child

angularjs

angular-material