每个浏览器都在占用“空格键” $(window).keydown()答案

【问题标题】：Every browser is hogging the 'spacebar' $(window).keydown()每个浏览器都在占用“空格键” $(window).keydown()
【发布时间】：2014-02-04 11:32:03
【问题描述】：

每个浏览器都在占用“空格键”

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

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

请注意，keydown 正在工作，但正在执行两个功能：录制（好，我的想法）和向下滚动页面（坏，mozilla/google/apple 想法）。

到目前为止，我尝试过... 文档.keydown 窗口.keydown $('#thediv').focus(); // 这个是用来尝试通过 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');`

这有点难以想象。当然，#red 和 #page-cover（覆盖）以 display:none 开始。对此有何提示？

【问题讨论】：

我从未检查过但会使用event.preventDefault 阻止浏览器在空格键下滚动？
看起来确实如此，耶。 stackoverflow.com/questions/2343573/…
感谢 helion3，我刚刚对其进行了测试，它适用于 firefox，但不适用于 safari 或 chrome。

标签： jquery keydown

【解决方案1】：

您必须阻止事件传播。

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

在 jQuery 中，事件将通过 DOM 冒泡。虽然您有一个绑定到空格键按下的事件，但您只是添加到该按键上已经存在的默认绑定（例如字符打印、滚动等）。一旦你完成了 keyDown/keyUp 事件的处理，空格键也会触发一个针对文档的滚动事件；它从 div 冒泡到 div 的父级。您可以通过以下两种方法之一来阻止传播：

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

或

e.stopPropagation(); // this is essentially the same thing as returning false, but makes more sense from a readable code standpoint.

jQuery stop propagation

你的关键事件应该是这样的：

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

【讨论】：