JSFiddle - React, Tailwind, and code Playground

by vcsjones

HTML

<p>Click on the "C" box. What message will be shown?</p>

<div id="a">
A
    <div id="b">
B
         <div id="c">
C
        </div>
    </div>
</div>

CSS

#a {
width: 250px;
height: 250px;
}
#b {
width: 175px;
height: 175px; 
}

#c {
width: 100px;
height: 100px;

}
#a, #b, #c {
    border: 1px solid #000; 
    cursor: pointer;
}
p {
    margin: 15px;
}

CoffeeScript

$ ->
    $('#a').on 'click', '#c', ->
        alert 'You clicked C!'    
    $('#b').on 'click', (e) ->
        alert 'You clicked B!'
        do e.stopPropagation