Question

尝试捕获Bootstrap Tab Panel菜单上的按键，但它只是冒泡而忽略了贴在tab的keydown处理程序上的preventDefault（）。

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();

});

实施例： http://www.bootply.com/xUlN0dLRaV

我在这里缺少什么？

Answer 1

尝试e.stopPropagation()

e.stopPropagation()可防止事件冒泡DOM树，从而阻止任何父处理程序收到有关该事件的通知。

$('body > div > ul > li > a').on("keydown",function (e) {
  console.log("handled by the child - stop bubbling please");
  e.preventDefault();
  e.stopPropagation();
});

<强>差分吗

What's the difference between event.stopPropagation and event.preventDefault?

Answer 2

除了e.preventDefault之外，您还必须使用e.stopPropagation()来防止事件冒出来。在您的情况下，您还可以从事件处理程序返回false，它同时执行以下操作：

$('body > div > ul > li > a').on("keydown",function (e) {
  console.log("handled by the child - stop bubbling please");
  return false;
});

keydown上的event.preventDefault（）无效

2 个答案: