为什么在keydown回调中返回false不会停止按钮单击事件？

Question

我有一个按钮和以下的javascript例程.

$("button").keydown( function(key) {
  switch(key.keyCode) {
  case 32: //space
    return false;
  }
} );

据我所知,它return false;会阻止按键被处理.所以$("button").click();不会被召唤.对于其他keyCodes,这可以按预期工作.例如,如果我拦截40,这是向下按钮,页面不滚动.

我在Firefox中注意到了这种行为.

为什么不return false;停止空格上的按钮点击事件？javascript规范对此有何评价？

Answer 1

希望这能回答你的问题:

<input type="button" value="Press" onkeydown="doOtherStuff(); return false;">

return false;如果在HTML中的事件处理程序属性的末尾调用,则成功取消跨浏览器的事件.据我所知,这种行为在任何地方都没有正式指定.

如果不是通过DOM元素(例如,在事件处理程序属性设置一个事件button.onkeydown = function(evt) {...})或使用addEventListener/ attachEvent(例如button.addEventListener("keydown", function(evt) {...}, false)),那么刚刚返回false从功能不会在每一个浏览器工作,你需要做的returnValue和preventDefault()东西从我的其他答案.preventDefault在DOM 2规范中指定,并由大多数主流现代浏览器实现.returnValue是IE特定的.

Answer 2

首先,如果您正在检测可打印字符(如空格),那么您最好使用该keypress事件.其次,防止默认操作的方法是preventDefault()在非IE浏览器中调用事件并将事件的returnValue属性设置false为IE.

var button = document.getElementById("button");
button.onkeypress = function(evt) {
   evt = evt || window.event;
   var charCode = evt.keyCode || evt.which;
   if (charCode == 32) {
       if (evt.preventDefault) {
           evt.preventDefault();
       } else {
           evt.returnValue = false;
       }
   }
};

我不是jQuery专家,我认为它负责为您获取事件:

$("button").keypress(function(evt) {
   var charCode = evt.keyCode || evt.which;
   if (charCode == 32) {
       if (evt.preventDefault) {
           evt.preventDefault();
       } else {
           evt.returnValue = false;
       }
   }
});