Jquery 每个浏览器都占据着“空格键”$（窗口）.keydown（）

每个浏览器都占据着“空格键”

我有几个div是从隐藏开始的，应该在点击按钮时弹出。一个div是覆盖整个页面的半透明背景，另一个div有一些内容并显示在另一个覆盖层上

当显示div时，我会提示用户在按住空格键的同时说出他们的名字。但每次用户按下空格键时，浏览器也会向下滚动页面

请注意，keydown是有效的，但它执行两个功能：记录好的和我的想法，以及向下滚动坏的页面，mozilla/google/appleidea

到目前为止我试过。。。 document.keydown window.keydown $“thediv”。焦点；//这个用于尝试通过JS选择div。当我首先手动剪切元素时，它不会向下滚动

在你问之前，答案是：是的。。。它必须是空格键。没有别的办法

代码：`

$('#triggeringlink').on('click',function(e){
      //var text = $('#trans_source').val();

     $("#page-cover").css("opacity",0.6).fadeIn(300, function () {  

         //dim the rest
        $('#red').css({'position':'absolute','z-index':9999});

        //and bring the board up to the top
        $('#red').css('display','block');
        var source = $('#trans_source').val();
        $('#entercardsource').attr('value', source);
        var target = $('#trans_target').val();
        $('#entercardtarget').attr('value', target);
        $('#red').focus();
        //added for cards
        //$("#focus_point").attr("tabindex",-1).focus();
            var recording = false;
            $(document).keydown(function(e){
                if(e.keyCode == 32){
                    if(!recording){
                        //startRecording();
                        //recording = true;
                        alert('Recorrding');
                    }else{
                        //do nothing
                    }

                }
            }).keyup(function(e){
                if(e.keyCode ==32){
                    //stopRecording();
                    //createDownloadLink();
                    recording = false;
                    alert('Stopped recording');
                }
            });


        //alert(text);


     });
   e.preventDefault();
   });

  $('#page-cover').on('click', function(){
      $('#page-cover').css('display','none');
      $('#red').css('display','none');
      //window eh for entering card audio
      $(window).off('keydown');
      $(window).off('keyup');`

---

这有点难以想象。当然，红色和红色页面会覆盖覆盖层的开头，显示为：无。有什么提示吗？

您必须阻止事件传播

e、 默认值不一定能做到这一点。它只会停止正在处理的当前事件的默认操作。在这种情况下，它将阻止将密钥打印到页面上

在jQuery中，事件将在DOM中出现。当您将事件绑定到空格键时，您只需添加到该按键上已存在的默认绑定，例如字符打印、滚动等。。处理完keyDown/keydup事件后，空格键还将触发文档的滚动事件；它从div冒泡到div的父级。可以通过以下两种方法之一防止传播：

return false; // in jQuery when you return false from an event it won't propagate

或

以下是您的关键事件的外观：

$(document).keydown(function(e) {
    if(e.keyCode == 32 && !recording){
        //startRecording();
        //recording = true;
        alert('Recording');
    }
    return false; // or e.stopPropagation();
})
.keyup(function(e) {
    if(e.keyCode ==32) {
        //stopRecording();
        //createDownloadLink();
        recording = false;
        alert('Stopped recording');
    }
    return false; // or e.stopPropagation();
});

---

我从来没有检查过，但是使用event.preventDefault会阻止浏览器在空格键上滚动吗？看起来是的，耶。感谢helion3，我刚刚测试了它，它适用于firefox，但不适用于safari或chrome。

$(document).keydown(function(e) {
    if(e.keyCode == 32 && !recording){
        //startRecording();
        //recording = true;
        alert('Recording');
    }
    return false; // or e.stopPropagation();
})
.keyup(function(e) {
    if(e.keyCode ==32) {
        //stopRecording();
        //createDownloadLink();
        recording = false;
        alert('Stopped recording');
    }
    return false; // or e.stopPropagation();
});