I was looking at http://www.quirksmode.org/js/events_order.html and it is ambiguous in this part:
In the Microsoft model you must set the event’s
ca
stopPropagation() will not stop the captured event handler from getting called. stopPropagation() will stop the bubbled event handler from getting called.
Jsfiddle
var outputDiv = document.getElementById('output');
function log(msg) {
outputDiv.insertAdjacentHTML('afterend', msg + '
');
}
/////////////////////
//Bubbling listeners
/////////////////////
document.getElementById('row1').addEventListener('click', function(e) {
log('Bubbling row1 listener called');
e.stopPropagation();
}, false);
document.getElementById('row2').addEventListener('click', function(e) {
log('Bubbling row2 listener called');
//NO stopPropagation on this one.
}, false);
document.getElementById('table').addEventListener('click', function() {
log('Bubbling table listener called');
}, false);
document.addEventListener('click', function() {
log('Bubbling document listener called');
}, false);
/////////////////////
//Capturing listeners
/////////////////////
document.addEventListener('click', function() {
log('Capturing document listener called');
}, true);
document.getElementById('table').addEventListener('click', function() {
log('Capturing table listener called');
}, true);
#outputwrapper {
border: 1px solid black;
height: 300px;
overflow: scroll;
}
This row has stopPropagation
This row does not have stopPropagation
Output