JSFiddle - React, Tailwind, and code Playground

by voigtan

HTML

<ul>
    <li><a href="#" class="demo1">Demo 1</a></li>
    <li><a href="#" class="demo2">Demo 2 (preventDefault)</a></li>
    <li><a href="#" class="demo3"><span>Demo 3 (stopPropagation)</span></a></li>
    <li><a href="#" class="demo4"><span>Demo 4 (stopImmediatePropagation)</span></a></li>
    <li><a href="#" class="demo5"><span>Demo 5 (false)</span></a></li>
    <li><a href="#" class="demo6"><span>Demo 6 (delegate)</span></a></li>
</ul>

<div id="debug"></div>

CSS

#debug { position: fixed; bottom: 0; left: 0; right: 0; background: #eee; padding: 5px; } 
#debug div { border-bottom: 1px solid #ddd; }

JavaScript

var console = { log: function(value) { $("#debug").append("<div>" + value + "</div>"); }};
$("#debug").on("click", function() { $(this).html(""); return false; });

$(document).on("click", function(e) {
    console.log("click!");
});
$("li").on("click", function(e) {
    console.log('li');
});
$("span").on("click", function(e) {
    console.log('span');
});

// Demo 1
$("a.demo1").on("click", function(e) {
    console.log('demo 1');
});

// Demo 2 ( preventDefault)
$("a.demo2").on("click", function(e) {
    console.log("demo 2");
    e.preventDefault();
});

// Demo 3 (stopPropagation)
$("a.demo3").on("click", function(e) {
    console.log("demo 3-a");
});
$("a.demo3").on("click", function(e) {
    console.log("demo 3-b");
    e.stopPropagation();
});
$("a.demo3").on("click", function(e) {
    console.log("demo 3-c");
});

// Demo 4 (stopImmediatePropagation)
$("a.demo4").on("click", function(e) {
    console.log("demo 4-a");
});
$("a.demo4").on("click", function(e) {
    console.log("demo 4-b");
    e.stopImmediatePropagation();
});
$("a.demo4").on("click", function(e) {
    console.log("demo 4-c");
});

// Demo 5 (false)
$("a.demo5").on("click", function(e) {
    console.log("demo 5-a");
});
$("a.demo5").on("click", function(e) {
    console.log("demo 5-b");
    return false; // e.preventDefault && e.stopPropagation();
});
$("a.demo5").on("click", function(e) {
    console.log("demo 5-c");
});
    
// Demo 6 ( Delegate )    
$(document).on("click", "a.demo6", function(e) {
    console.log("demo 5-a");
    e.stopImmediatePropagation();
})
.on("click", "a.demo6", function(e) {
    console.log("demo 5-b");
    return false; // e.preventDefault && e.stopPropagation();
})
.on("click", "a.demo6", function(e) {
    console.log("demo 5-c");
});