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

Question

我一直在做一些需要我使用空格键来触发事件的东西.我一直在努力的事情要复杂得多,但我把它简化为基础知识,作为我需要做的事情的一个例子.

这个想法是,当空格键被按下时,它会突出显示这个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();
    }
});

在这里演示

Answer 1

DEMO

捕获keypress的事件,而不是和toggleClass red你可以检查对象的商品是否body或input element使用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
    }
});

或者,如果您想要保持闪烁,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