JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<ul>
<li class="li"><input type="checkbox" /><span>Hello</span></li>
<li class="li stop"><input type="checkbox" /><span>Hello with stop propagation for checkbox</span></li>
</ul>
<div id="result"></div>

CSS

li {list-style-type: none;}
#result {font-family: "Courier New"; font-size: 12px;}

JavaScript

var timer;
function out(str) {
    if (timer) {
        clearTimeout(timer);
        timer = null;
    }
    $("#result").append(str + "<br>");
    timer = setTimeout(function() {
        $("#result").append("-------" + "<br>");
        timer = null;
    }, 100);
}

$(".li").find('input').click(function(e){
    out('li>input');
    if ($(this).parent().hasClass("stop")) {
        e.stopPropagation();
    }
});
$(".li").click(function(e){
    out('li');
});
$('input').click(function(e){
    out('input');
    if ($(this).parent().hasClass("stop")) {
        e.stopPropagation();
    }
});