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'); }); inner2.addEventListener('click', function (e) { alert('inner clicked'); e.preventDefault(); e.returnValue = false; }); $('#outer_jquery').click(function () { alert('outer clicked'); return false; }); $('#inner_jquery').click(function () { alert('inner clicked'); return false; });
<div id="outer_DOM_0"> <p>DOM level 0:</p> <p><a href="http://google.com" id="inner_DOM_0">Test</a></p> </div> <div id="outer_DOM_2"> <p>DOM level 2:</p> <p><a href="http://google.com" id="inner_DOM_2">Test</a></p> </div> <div id="outer_jquery"> <p>jQuery:</p> <p><a href="http://google.com" id="inner_jquery">Test</a></p> </div>
div { height: 100px; width: 100px; } #outer_DOM_0 { background-color: green; } #outer_DOM_2 { background-color: orange; } #outer_jquery { background-color: yellow; }