JSFiddle - React, Tailwind, and code Playground

by springuper

HTML

<div class="outter">
    <div class="inner">
        <button id="test-btn">Click me!</button>
    </div>
</div>

CSS

.outter { width:200px; padding:50px; background:#080; }
.inner { padding:50px; background:#CCC; }

JavaScript

var elBtn = document.getElementById('test-btn');
var elInner = elBtn.parentNode;
var elOutter = elInner.parentNode;

elBtn.addEventListener('click', handleBtnClick, false);
elInner.addEventListener('click', handleInnerClick, false);
elOutter.addEventListener('click', handleOutterClick, false);

function handleBtnClick(e) {
    alert('click button');
}
function handleInnerClick(e) {
    alert('click inner box');
}
function handleOutterClick(e) {
    alert('click outter box');
}