var elDebug; function bold(el){return "" + el + "";} function bracket(el){return "<" + el + ">"} var bodytag = bold(bracket("body")); var htmltag = bold(bracket("html")); var windowObj = bold("window"); var documentObj = bold("document"); function addDefaultStatus(what){ return "Default prevented = " + (what.defaultPrevented ? "TRUE" : "FALSE") + ""; } function clearOutput(){ setTimeout(function() { document.getElementById('debug').innerHTML='' }, 50); } var bubbling = false, capturing = true; var direction = capturing; // flipped on first attach function flipEventListeners(){ window.removeEventListener("click", windowClick, direction); document.removeEventListener("click", documentClick, direction); document.getElementsByTagName("html")[0].removeEventListener("click", htmlClick, direction); document.body.removeEventListener("click", bodyClick, direction); direction = !direction; window.addEventListener("click", windowClick, direction); document.addEventListener("click", documentClick, direction); document.getElementsByTagName("html")[0].addEventListener("click", htmlClick, direction); document.body.addEventListener("click", bodyClick, direction); if(direction==bubbling) document.getElementById("button").innerHTML = "Bubbling (click to use CAPTURING)"; else document.getElementById("button").innerHTML = "Capturing (click to use BUBBLING)"; event.preventDefault(); clearOutput() } function windowClick(event){ elDebug.innerHTML += windowObj + ": click. " + addDefaultStatus(event) + "
"; //event.stopPropagation(); } function documentClick(event){ elDebug.innerHTML += documentObj + ": click. " + addDefaultStatus(event) + "
"; } function htmlClick(event){ elDebug.innerHTML += htmltag + ": click. " + addDefaultStatus(event) + "
"; } function bodyClick(event){ //for(var i in event) debug.innerHTML += i + ": " + event[i] + "
"; elDebug.innerHTML += "

" + bodytag + ": click.
"; if(event.target == "https://www.google.com/") { elDebug.innerHTML += "...Preventing default action (which is to follow link).
The event still propagates through the DOM
"; event.preventDefault(); } } window.onload = function(){ elDebug = document.getElementById("debug"); flipEventListeners(); }

preventDefault, bubbling + capturing