如何用jQuery的preventDefault()仅禁用空格键的默认滚动行为？

你当前的代码把事件绑定在html元素上，会全局拦截所有空格键事件，导致输入框、文本域无法输入空格，按钮按空格无法触发点击等异常——这就是不良影响的根源。要只阻止页面滚动的默认行为，需要过滤掉可交互/可输入元素的空格事件，只在非编辑场景下阻止默认行为。

修正后的代码方案 #

方案1：精确判断目标元素类型

$(document).keydown(function(e) {
  // 仅当按下空格键时处理
  if (e.key === ' ') {
    const target = e.target;
    // 判断目标元素是否是可输入/可交互的需要保留空格功能的元素
    const isInputElement = target.tagName === 'INPUT' && !target.disabled && !['button', 'submit', 'reset'].includes(target.type);
    const isTextarea = target.tagName === 'TEXTAREA' && !target.disabled;
    const isContentEditable = target.isContentEditable && target.contentEditable === 'true';
    const isButton = target.tagName === 'BUTTON' && !target.disabled;

    // 只有在非上述元素的情况下，才阻止默认滚动行为
    if (!isInputElement && !isTextarea && !isContentEditable && !isButton) {
      e.preventDefault();
    }
  }
});

方案2：利用jQuery选择器简化判断

$(document).keydown(function(e) {
  if (e.key === ' ') {
    // 筛选出允许输入空格的元素：可输入控件（排除按钮类）、可编辑元素
    const isEditable = $(e.target).is(':input:not([type="button"],[type="submit"],[type="reset"])') 
                      || $(e.target).is('[contenteditable="true"]');
    // 非可编辑元素下阻止滚动
    if (!isEditable) {
      e.preventDefault();
    }
  }
});

说明 #

• 用e.key === ' '替代已废弃的e.keyCode === 32，符合现代浏览器标准。
• 两种方案都会保留输入框、文本域、可编辑内容区、按钮的空格原有功能，仅在页面空白或非交互元素上阻止滚动。
• 绑定事件到document而非html，逻辑上更合理，覆盖全局场景的同时也能正确获取触发事件的目标元素。

内容的提问来源于stack exchange，提问作者Ben Viatte