JSFiddle - React, Tailwind, and code Playground

by skilldrick

HTML

<div id="outer_DOM_0">
    <p>DOM level 0:</p>
    <p><a href="#inner_clicked" id="inner_DOM_0">Test</a></p>
</div>

<div id="outer_DOM_2">
    <p>DOM level 2:</p>
    <p><a href="#inner_clicked" id="inner_DOM_2">Test</a></p>
</div>


<div id="outer_jquery">
    <p>jQuery:</p>
    <p><a href="#inner_clicked" id="inner_jquery">Test</a></p>
</div>

CSS

div {
    height: 100px;
    width: 100px;
}

#outer_DOM_0 {
    background-color: green;
}

#outer_DOM_2 {
    background-color: orange;
}

#outer_jquery {
    background-color: yellow;
}

JavaScript

var outer0 = document.getElementById('outer_DOM_0');
var inner0 = document.getElementById('inner_DOM_0');

outer0.onclick = function () {
    alert('outer clicked');
    return false;
};

inner0.onclick = function () {
    alert('inner clicked');
    return false;
};

var outer2 = document.getElementById('outer_DOM_2');
var inner2 = document.getElementById('inner_DOM_2');

outer2.addEventListener('click', function () {
    alert('outer clicked');
    return false;
});

inner2.addEventListener('click', function () {
    alert('inner clicked');
    return false;
});


$('#outer_jquery').click(function () {
    alert('outer clicked');
    return false;
});

$('#inner_jquery').click(function () {
    alert('inner clicked');
    return false;
});