Javascript 鼠标不在输入框内，禁用掉空格键的默认事件

josavion

于 2021-05-11 18:12:36 发布

阅读量797

点赞数 1

分类专栏：笔记文章标签： javascript

本文链接：https://blog.youkuaiyun.com/josavion/article/details/116664608

版权

笔记专栏收录该内容

36 篇文章

订阅专栏

最近开发一个大屏项目，需要按住左键对画布进行拖拽，但是由于在画布需要框选元素已经占用了左键的功能，所以产品提出在按住空格键 + 左键的情况下对画布进行拖拽的需求。我们知道空格键是有它的默认事件的。如果鼠标光标在输入框（这里指input、textarea等）内，敲击空格键的作用是在输入框内增加一个空格；如果鼠标光标不在输入框内，那么敲击空格键则会滚动滚动条（如果有滚动条的话）。那么我的需求就是：如果鼠标在输入框内，敲击空格键就有默认事件；如果鼠标光标不在输入框内，则阻止掉空格键的默认事件；以下是详细代码：

function keydown(e) {
  if (e.keyCode === 32) {
  // 如果鼠标不在输入框内，禁用掉空格键的默认事件（控制滚动条）
    if (e.target.nodeName !== "TEXTAREA" && e.target.nodeName !== "INPUT") {
      e.preventDefault();
    }
  }
}