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

Question

Is it possible to disable md-ink-ripple on a parent element, when I click on a child element like an <md-checkbox>?

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

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

When I click the <md-checkbox>, it should not trigger the md-ink-ripple, since it has an action attached to it (it's a checkbox). It should still trigger md-ink-ripple if I click on text (which isn't the checkbox).

Is that possible?

Answer 1

Here's one way of doing it - CodePen

I noticed that the ripple effect starts at mouse down, so one can stop that propagating on the md-checkbox.

Markup

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