事件keydown上的event.preventDefault()无效。

Question

尝试捕获Bootstrap选项卡面板菜单上的按键，但它会忽略放置在选项卡的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

我这里错过了些什么？

- Stavm

---

e.stopPropagation()? - Jonas Grumann

你需要像之前回答的那样使用 stopPrepagation，这显然不是重复问题。我们的伙伴想知道他使用的函数为什么不起作用，而不是它与另一个函数有何不同。 - Motassem Kassab

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

有何不同？

event.stopPropagation和event.preventDefault有什么区别？

- daan.desmedt

---

当您确定一个问题是重复的时候，不要回答它，而是发表评论说它是重复的，这样人们就可以正确地关闭它。(当然，在大约1400个声望点数后，您将能够直接投票关闭。) - T.J. Crowder

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

- Bartek Fryzowicz