Trying to capture the key presses on a Bootstrap Tab Panel menus, but it just bubbles up ignoring the preventDefault() placed on the tabs's keydown handler.
document.onkeydown = function(e) {
console.log("document catched the keydown event");
};
$('body > div > ul > li > a').on("keydown",function (e) {
console.log("handled by the child - stop bubbling please");
e.preventDefault();
});
Example: http://www.bootply.com/xUlN0dLRaV
what am i missing here ?
Try e.stopPropagation()
e.stopPropagation() prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
$('body > div > ul > li > a').on("keydown",function (e) {
console.log("handled by the child - stop bubbling please");
e.preventDefault();
e.stopPropagation();
});
Difference?
What's the difference between event.stopPropagation and event.preventDefault?
Besides e.preventDefault you have to also use e.stopPropagation() to prevent event bubling up. In your case you can also return false from event handler which do both:
$('body > div > ul > li > a').on("keydown",function (e) {
console.log("handled by the child - stop bubbling please");
return false;
});