Javascript 如何防止某些事件按键时出现默认值，然后再次恢复默认值

我一直在做一些需要我使用空格键来触发事件的事情。我一直在做的事情要复杂得多，但我把它简化为基本的，作为我需要做的一个例子

这个想法是，当按住空格键时，它会高亮显示这个div，当放开它时，它会取消高亮显示。我遇到了一个问题，当我按下空格键时，默认设置是让滚动条分阶段向下跳转。为了解决这个问题，我尝试添加了prevent-default，最后使用return-false

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

我认为我需要的是：

• 在我完成后，以某种方式（撤消）防止默认值或返回false 虽然我不知道怎么做，但我已经完成了它的使用 因为我需要这个功能在整个页面上可用
• 按住空格键时，阻止页面向下滚动，但 在输入文本时仍保留添加空格的功能

真的不知道该怎么做

下面是我在本例中使用的代码：

HTML

脚本：

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

---

检查

e.target

，它告诉您当keydown/keyup事件被激活时，哪个DOM元素被聚焦。

---

如果目标类型为

textarea

或

input

，请不要禁用事件的默认处理。我会这样做：

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

而是捕获

按键

事件并

切换class

红色，您可以使用

e.target.nodeName

检查目标项目是

主体

还是

输入元素

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

或者，如果您想保持闪烁状态，只需将这两个事件保持如下：

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

---

太好了！虽然有一个问题。只要按下空格键，事件就需要被触发，然后当它被释放时，它就会移除类。太棒了！那太好了！！一个很小的问题是keyup需要是addClass和bottomremoveclass，但这只是为了让它变得完美。非常感谢你！！！随时快乐编码…）

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

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