JSFiddle - React, Tailwind, and code Playground

by Tushar Jadhav

HTML

<body ng-app ng-controller="TestController">
    <div id="parent" ng-click="parentClick()">
        <div id="child" ng-click="childClick($event)"></div>
        <p ng-bind="elem"></p>
    </div>
    <div>
        <p style="text-align:center" ng-bind="childElem"></p>
    </div>
</body>

CSS

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#parent {
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 1;
    margin: 10px auto 0 auto;
    background-color: #00acee;
    border-radius: 2px;
    cursor: pointer;
}
#parent:hover {
    opacity: 0.5;
}
#child {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background-color: #FFF;
    border-radius: 2px;
    cursor: pointer;
}
#child:hover {
    opacity: 0.5;
}
#parent p {
    width: 100%;
    position: absolute;
    bottom: 0px;
    text-align: center;
    color: #FFF;
}

JavaScript

function TestController($scope) {
    $scope.parentClick = function () {

        $scope.elem = 'Parent';
    }

    var i = 1;
    $scope.childClick = function (e) {
        $scope.elem = 'Child';
        $scope.childElem = 'Child event triggered x' + i;
        i++;
        e.stopPropagation();
    }
}