JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div>
    <ul>
        <li></li>
    </ul>
</div>

<!-- div, li, ul, body -->

CSS

* {
    padding: 20px !important;
}

body {
    background: purple;
}

div {

   background: red;
}

ul {
    background: yellow;
}

li {
    background: green;
}

JavaScript

var dropdown_is_open = false;

document.querySelector('li').addEventListener('click', function (e) {
    alert('li');
}, true);


document.querySelector('ul').addEventListener('click', function (e) {
    alert('ul');
}, false);


document.querySelector('div').addEventListener('click', function (e) {
    alert('div');
}, true);


document.body.addEventListener('click', function (e) {
    alert('body');
}, false);