Snorlax Snorlax - 2 months ago 22
AngularJS Question

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

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

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