<html>
<head>
<script>
function registerForEvents() {
var logElement = document.getElementById('log');
function anchorCapture(e) {
console.log("click captured");
e.preventDefault();
}
var anc = document.getElementById("mylink");
anc.addEventListener('click', anchorCapture, true);
document.addEventListener("mousedown", function(e) {
console.log("mouse down captured");
}, true);
document.addEventListener("mouseup", function(e) {
console.log("mouse up captured");
}, true);
}
</script>
</head>
<body onload="javascript:registerForEvents()">
<a id="mylink" href="www.google.com">google</a>
</body>
</html>
copy paste the above code and add a breakpoint in chrome at line 15 (i.e console.log("mouse down captured");)
once the breakpoint is hooked press F8 (continue), you can see that other event handlers are ignored, why??
Output
mouse down captured
If the breakpoint is at line 18 you would see
Output
mouse down captured mouse up captured click captured
This would only appear if you hook breakpoints on mousedown events, seems to be fine with firefox (don't try on IE as callback methods are different)
Thanks