为什么在keydown回调中返回false并没有停止按钮点击事件?

IT技术 javascript jquery button keyboard
2021-03-05 05:18:08

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

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

据我了解,这return false;将停止处理按键。所以$("button").click();不会被调用。对于其他 keyCodes,这按预期工作。例如,如果我拦截40了向下按钮,则页面不会滚动。

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

为什么不return false;停止空间上的按钮单击事件?javascript 规范对此有何评论?

3个回答

希望这能回答你的问题:

<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从功能不工作在每一个浏览器,你需要做的returnValuepreventDefault()东西从我的其他答案。preventDefaultDOM 2 规范中指定并由大多数主流现代浏览器实现。returnValue是特定于 IE 的。

@Si8:如果您的doOtherStuff()上述等效项引发错误,则可能会发生这种情况
2021-05-05 05:18:08
在我的 asp.net 表单中,它仍然会触发页面刷新。
2021-05-21 05:18:08

首先,如果您正在检测可打印的字符,例如空格,则最好使用该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;
       }
   }
});
@Tim:OP 的原始代码示例是用于取消事件的有效 jQuery。在这种情况下,不需要任何通常的跨浏览器代码切换。
2021-04-22 05:18:08
我测试了它,key.preventDefault();Firefox 中没有任何变化。keydown会检测产生可打印字符的键,所以有什么问题keydown吗?
2021-04-26 05:18:08
行。生成按钮的 HTML 是什么?您确定正在调用按键处理程序吗?在空格的情况下,您可能可以使用keydownkeyCode32,但通常使用可打印字符keypress通过提取由按键产生的字符而不是对应于的代码抽象键盘或其他输入设备之间的任何潜在差异输入设备上的键。
2021-05-04 05:18:08
@cresecentfresh:好的。猜猜我不使用 jQuery 的事实正在显示出来。当有人发布更好的答案时,我会删除它。
2021-05-13 05:18:08

您可以只使用表单中的一个属性来停止提交 enter.<form method="post" onkeydown="return false;">

如: onkeydown="return false;"在表单属性中

<form method="post" onkeydown="return false;"></form>