Every browser is hogging the 'spacebar' $(window).keydown()

Question

Every browser is hogging the 'spacebar'

I have a couple divs that start hidden, and are supposed to pop up when an button is clicked. One div is a translucent backdrop over the whole page,the other has some content and appears atop the other overlay.

When divs are shown, I prompt the user to speak their name while holding the spacebar. But every time the user presses the space bar, the browser ALSO scrolls down the page.

mind you, keydown is working, but is performing two functions: recording (good and my idea) and scrolling down the page (bad, mozilla/google/apple idea).

so far i tried... document.keydown window.keydown $('#thediv').focus(); // this one was used to try and select the div through JS. When i manually clikc the element first it doesnt scroll down..

And before you ask the answer is: "yes"... it has to be the spacebar. Nothing else will do.

code:`

$('#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');`

that is a bit much to visualize. of course #red and #page-cover( the overlay) start offf as display:none. Any hints on this?

I've never checked but would using `event.preventDefault` stop the browser from scrolling on spacebar keydown? — helion3, Feb 04 '14 at 03:08
Looks like it does, yay. http://stackoverflow.com/questions/2343573/pressing-spacebar-moves-page-down — helion3, Feb 04 '14 at 03:09
thanks helion3, i just tested it out and that works for firefox, but not safari or chrome straight away. — user3238414, Feb 04 '14 at 03:25

Bic · Answer 1 · 2014-02-04T03:32:03.163

You have to stop the event from propagating.

e.preventDefault won't necessarily do this. It will only stop the default action of the current event being handled. In this case, it will prevent the key from being printed onto the page.

In jQuery, events will bubble up through the DOM. While you have an event bound to the spacebar press, you are only adding to the already default bindings that are present on that keypress (e.g character printing, scrolling, etc.). Once you finish handling the keyDown/keyUp events, the spacebar will also trigger a scroll event against the document; it bubbles up from the div to the div's parent. You can prevent the propagation by one of two methods:

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

Here is what your key events should look like:

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

Every browser is hogging the 'spacebar' $(window).keydown()

1 Answers1