如何防止某些事件的按键默认值，然后再次恢复默认值答案

【问题标题】：how to prevent default on keypress for certain event but then bring back the default again如何防止某些事件的按键默认值，然后再次恢复默认值
【发布时间】：2015-08-19 12:57:46
【问题描述】：

我一直在做一些需要我使用空格键来触发事件的事情。我一直在做的事情要复杂得多，但我已将其简化为基础知识，作为我需要做的一个示例。

这个想法是，当空格键被按住时，它会突出显示这个 div，而当它松开时，它会取消突出显示。我有一个问题，当我按下空格时，默认是让滚动条分阶段向下跳。为了解决这个问题，我尝试添加阻止默认值，然后最终使用 return false。

这太棒了...直到我意识到，当我在输入字段文本框中测试输入时，我失去了在输入时放置空格的能力。

我认为我需要的是：

在我完成之后以某种方式（撤消）阻止默认值或返回 false 完成使用它虽然我不知道如何做到这一点因为我需要这个功能在整个页面上都可用。
按住空格键时阻止页面向下滚动，但仍然可以在输入文本时添加空格。

真的不知道该怎么做。

这是我用于此示例的代码：

HTML

<div class="container">
    <div class="moo">I am moo</div>
    <input/>
</div>

CSS：

.container {
     height:9000px;   
}
.moo {
    border:1px solid black
}
.red {
    background:red;
}
input {
    margin-top:30px;
}

脚本：

$(document).keydown(function(e) {
    if(e.keyCode === 32) {
        $('.moo').addClass('red');
        //event.preventDefault();
        //event.stopPropagation();
        return false;
    }
    else {
        $('.moo').removeClass('moo');
    }
});
$(document).keyup(function(e) {
    if(e.keyCode === 32) {
        $('.moo').removeClass('red');
        event.stopPropagation();
    }
});

DEMO HERE

【问题讨论】：

标签： javascript jquery html keydown preventdefault

【解决方案1】：

DEMO

捕获keypress事件而不是toggleClassred，您可以使用e.target.nodeName检查目标项目是body还是input element

$(document).keypress(function(e) {
    if(e.keyCode === 32 && e.target.nodeName=='BODY') {
        $('.moo').toggleClass('red');
        event.preventDefault(); //prevent default if it is body
    }
});

或者，如果您想在 keyup 和 keydown 上保持闪烁，只需将这两个事件保持如下：

$(document).keydown(function(e) {
    if(e.keyCode === 32 && e.target.nodeName=='BODY') {
        $('.moo').toggleClass('red');
        event.preventDefault();
    }
});
$(document).keyup(function(e) {
    if(e.keyCode === 32 && e.target.nodeName=='BODY') {
        $('.moo').toggleClass('red');
        event.preventDefault();
    }
});

DEMO

【讨论】：

太好了！虽然是一个问题。只要按住空格键，就需要触发该事件，然后当它被释放时，它会删除类。
太棒了！完美的工作！一件小事是 keyup 需要 addClass 和底部 removeClass 但这只是为了它是完美的。非常感谢！！！
任何时候.. 快乐编码.. :)

【解决方案2】：

我会这样做：

$("input").keydown(function(e) {
    if(e.keyCode === 32) {
        $(this).val($(this).val()+ " ");
    }
});

Here is the JSFiddle demo

【讨论】：

【解决方案3】：

检查e.target，它会告诉您在激活 keydown/keyup 事件时关注的 DOM 元素。如果目标是 textarea 或 input 类型，请不要禁用事件的默认处理

【讨论】：