e.PreventDefault e.stopPropagation

test of event.PreventDefault() and event.stopPropagation()

by Laurens Maneschijn

HTML

<hr>
open console and click test1 etc. to see which events are fired, in what order, 
    and if the link is followed or prevented (the result window does or does not reload)<br>
<br>
<a href="https://api.jquery.com/event.preventDefault/">jQ e.preventDefault()</a><br>
<a href="https://api.jquery.com/event.stoppropagation/">jQ e.stopPropagation()</a><br>
<a href="https://api.jquery.com/event.stopImmediatePropagation/">jQ e.stopImmediatePropagation()</a><br>
<a href="https://api.jquery.com/category/events/event-object/">jQ event object</a><br>

JavaScript

// open console and click test1 etc.
// NB: when using $(document.body).on(eventtype, target, handler) the event first travels all the way up to document.body before anything is done.

for(var i = 0 ; i <= 5 ; i++){
    $('body').prepend('<a id="a_'+i+'" class="a" href="?"><span class="s" id="s_'+i+'">test'+i+'</span><a> ');
}

// log events, defined on top (firing first):
$('a.a,span.s').click(function(e){
	console.log('top    click ' + this.id, e);
});
$(document.body).on('click', 'a.a,span.s', function(e){
	console.log('top    on click ' + this.id, e);
});


// 0: control group: no preventDefault(), no stopPropagation(), log all and leave page
// fires events:
// 01 : top    click s_0
// 02 : custom click s_0
// 03 : bottom click s_0
// 04 : top    click a_0
// 05 : bottom click a_0
// 06 : top    on click s_0
// 07 : custom on click s_0
// 08 : bottom on click s_0
// 09 : top    on click a_0
// 10 : bottom on click a_0
$('#s_0').click(function (e) {
	console.log('custom click s_0',e);
});
$(document.body).on('click', '#s_0', function (e) {
	console.log('custom on click s_0',e);
});

// 1: on + preventDefault() : logs all, and stay on page
$(document.body).on('click', '#s_1', function (e) {
	console.log('custom on click s_1 e.preventDefault',e);
	e.preventDefault();
});

// 2: on + stopPropagation() : only prevents log 09,10:'top/bottom on click a_2', and leave page
$(document.body).on('click', '#s_2', function (e) {
	console.log('custom on click s_2 e.stopPropagation',e);
	e.stopPropagation();
});

// 3: click + preventDefault() : log all, and stay on page
$('#s_3').click(function (e) {
	console.log('custom click s_3 e.preventDefault',e);
	e.preventDefault();
});

// 4: click + stopPropagation() : only log 01,03:'top/bottom click s_4', and leave page
$('#s_4').click(function (e) {
	console.log('custom click s_4 e.stopPropagation',e);
	e.stopPropagation();
});

// 5: click + stopImmediatePropagation() : stops EVERYTHING. 
// same as e.preventDefault() AND...