Disable Space Key

Question

How to lock space key to scroll down page when pressed ?

$(document).keydown(function(e) {
    if (e.keyCode == 32) { 
        return false;
    }
});

This code keeps letting the bar down when pressed space

I have this script that makes it stop, but I don’t understand the difference of the code:

/**
 * $.disablescroll
 * Author: Josh Harrison - aloofdesign.com
 *
 * Disables scroll events from mousewheels, touchmoves and keypresses.
 * Use while jQuery is animating the scroll position for a guaranteed super-smooth ride!
 */
;(function($) {
    "use strict";

    // Privates
    var instance;
    var _handleKeydown = function(event) {
        for (var i = 0; i < this.opts.scrollEventKeys.length; i++) {
            if (event.keyCode === this.opts.scrollEventKeys[i]) {
                event.preventDefault();
                return;
            }
        }
    };    

    var _handleWheel = function(event) {
        event.preventDefault();
    };

    // The object      
    function UserScrollDisabler($container, options) {    

        // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
        // left: 37, up: 38, right: 39, down: 40
        this.opts = $.extend({
            handleKeys : true,
            scrollEventKeys : [32, 33, 34, 35, 36, 37, 38, 39, 40]
        }, options);      
        this.$container = $container;
        this.$document = $(document);
        this.disable();
    }
    UserScrollDisabler.prototype = {
        disable : function() {
            var t = this;
            if(t.opts.handleKeys) {
                t.$document.on("keydown.UserScrollDisabler", function(event) {
                    _handleKeydown.call(t, event);
                });
            }
        },
        undo : function() {
            var t = this;
            t.$container.off(".UserScrollDisabler");
            if(t.opts.handleKeys) {
                t.$document.off(".UserScrollDisabler");
            }
        }
    };    
    // Plugin wrapper for object   

    $.fn.disablescroll = function(method) {  
        // If calling for the first time, instantiate the object and cache in this closure.
        // Plugin can therefore only be instantiated once per page.
        // Can pass options object in through the method parameter.
        if( ! instance && (typeof method === "object" || ! method)) {
            instance = new UserScrollDisabler(this, method); // this = jquery collection to act on = $(window), hopefully!
        }
        // Instance already created, and a method is being explicitly called, e.g. .disablescroll('undo');
        else if(instance && instance[method]) {
            instance[method].call(instance);
        }    
        // No method called explicitly, so assume 'disable' is intended.
        // E.g. calling .disablescroll(); again after a prior instantiation and undo.
        else if(instance) {
            instance.disable.call(instance);
        }   
    };
})(jQuery);

Answer 1

In the jQuery the return false; has the memo effect that the event.preventDefault(); (and even makes .stopPropagation()). Your code as is should be enough to stop the event.

In the code that shows below has more keys, keys these common to navigation by keys. If you want to use them too (ie. stop them too) you can check these keys quickly like this:

// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
// left: 37, up: 38, right: 39, down: 40
var teclasNavegacao = [32, 33, 34, 35, 36, 37, 38, 39, 40]

$(document).keydown(function (e) {
    for (var i = 0; i < teclasNavegacao.length; i++) {
        if (e.keyCode == teclasNavegacao[i]) {
            console.log(e.keyCode);
            return false;
        }
    }
});

Take a look at this example (link).

Take a look too in this answer on the same subject.