Question

每个浏览器都在占据'空格键'

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

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

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

到目前为止，我试过...... document.keydown window.keydown $（ '＃thediv'）专注（）。 //这个用来尝试通过JS选择div。当我首先手动clikc元素时，它不会向下滚动..

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

代码：`

$('#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（覆盖）start offf为display：none。有关于此的任何提示吗？

Answer 1

您必须停止传播事件。

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

在jQuery中，事件将通过DOM冒出来。当您有一个绑定到空格键按下的事件时，您只会添加该按键上存在的已经默认的绑定（例如字符打印，滚动等）。处理完keyDown / keyUp事件后，空格键还会触发文档的滚动事件;它从div冒泡到div的父母。您可以通过以下两种方法之一阻止传播：

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

OR

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

每个浏览器都占用'空格键'$（窗口）.keydown（）

1 个答案: