javascript如何阻止空格键答案

【问题标题】：javascript how to block space barjavascript如何阻止空格键
【发布时间】：2021-06-07 19:58:05
【问题描述】：

我正在构建一个应用程序，我想阻止空格键滚动我的页面

我正在使用 VUE，我正在使用事件处理程序调用方法

但是调用 keymonitor 方法会报错：

箭头主体周围出现意外的块语句；在=>之后立即移动返回值

你知道如何正确调用'keymonitor'方法吗？

window.addEventListener('keydown', e => {
  return this.keymonitor(e)
})


keymonitor(event) {
  if (this.sendkey === 1) {
    if (event.key.length === 1) {
      this.keyDown = {
        cmd: 'keyboard',
        key: event.key,
      }
    } else if (
      event.key === 'Enter' ||
      event.key === 'Tab' ||
      event.key === 'PageUp' ||
      event.key === 'PageDown' ||
      event.key === 'End' ||
      event.key === 'Home' ||
      event.key === 'ArrowLeft' ||
      event.key === 'ArrowUp' ||
      event.key === 'ArrowRight' ||
      event.key === 'ArrowDown' ||
      event.key === 'Backspace' ||
      event.key === 'Delete' ||
      event.key === 'Escape'
    ) {
      this.keyDown = {
        cmd: 'keyboardSpecial',
        key: event.key,
      }
      // event.preventDefault();
    }
    console.log('eventkey: ')
    console.log(this.keyDown)
    this.sendMessage(this.keyDown)
  }
  if (event.which === 32) {
    console.log('SPACE')
  }
  return false
},

【问题讨论】：

它可能会要求你这样做：window.addEventListener('keydown', e => this.keymonitor(e))

标签： javascript vue.js

【解决方案1】：

改用下面的代码 - 我对这里的 this 不太满意

const keymonitor = event => {
  if (this.sendkey === 1) {
    if (event.key.length === 1) {
      this.keyDown = {
        cmd: 'keyboard',
        key: event.key,
      }
    } else if (
      event.key === 'Enter' ||
      event.key === 'Tab' ||
      event.key === 'PageUp' ||
      event.key === 'PageDown' ||
      event.key === 'End' ||
      event.key === 'Home' ||
      event.key === 'ArrowLeft' ||
      event.key === 'ArrowUp' ||
      event.key === 'ArrowRight' ||
      event.key === 'ArrowDown' ||
      event.key === 'Backspace' ||
      event.key === 'Delete' ||
      event.key === 'Escape'
    ) {
      this.keyDown = {
        cmd: 'keyboardSpecial',
        key: event.key,
      }
      // event.preventDefault();
    }
    console.log('eventkey: ')
    console.log(this.keyDown)
    this.sendMessage(this.keyDown)
  }
  if (event.which === 32) {
    console.log('SPACE')
    event.preventDefault()
  }
  return false
}

window.addEventListener('keydown', keymonitor)

【讨论】：

我已经改变了你所展示的调用方法，但似乎“return false”不起作用，因为空格键仍在滚动我的页面。你知道为什么吗？
你试过我添加的event.preventDefault()了吗？
event.preventDefault() 完美。如果需要，如何禁用它？
使用切换 if (disableSpace) event.preventDefault() 并在某处设置 disableSpace

【解决方案2】：

window.addEventListener("keydown", keymonitor);

如果您在函数中将事件定义为参数，Keymonitor 将自动获取事件作为参数，您已经这样做了

确保在函数 keymonitor 之后添加 window.addEvenListener。否则会超出范围。因为它还不存在。

要真正阻止密钥工作：

if (event.which === 32) {
    console.log('SPACE')
    event.preventDefault();
  }

return false;

【讨论】：

我做到了，但不知何故空格键仍然有效（滚动页面），这意味着“返回 false”不起作用。你知道为什么吗？
@mplungjan 我只是在回答 cmets 中提出的问题。甚至没有看你的帖子......我无法帮助它在Javascript中完成的方式
在添加内容之前重新加载和阅读其他答案总是有用的。你永远不知道你要写的答案是否与别人的相同，是否可以删除
这对我来说是一个学习点。下次肯定会这样做:)

【解决方案3】：

受HTML prevent space bar from scrolling page 的启发，我为您创建了一个简化的工作示例。

new Vue({
  el: '#app',
  created() {
    window.addEventListener('keydown', e => {
      if (e.keyCode == 32 && e.target == document.body) {
        alert('prevented spacebar on body');
        e.preventDefault();
      }
    })
  }
});

body {
  height: 100000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input />
  <textarea></textarea>
</div>

【讨论】：