react 监听键盘事件及多按键事件

最新推荐文章于 2023-09-27 19:55:57 发布

water_Popcorn

最新推荐文章于 2023-09-27 19:55:57 发布

阅读量3.8k

点赞数 2

分类专栏： react 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/water_Popcorn/article/details/126180879

版权

react 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

1、监听

  useEffect(() => {
    window.addEventListener('keydown', onKeyDown); // 添加全局事件
    return () => {
      window.removeEventListener('keydown', onKeyDown); // 销毁
    };
  }, []);

2、onKeyDown事件实例

 // 键盘事件
  const onKeyDown = (e) => {
    switch (e.keyCode) {
      case 65: // A事件
        fn('A');
        break;
      case 79: // O事件 
        fn('o');
        break;
    
    }
  //ctrl+z或y事件   多键同理
  if (window.event.ctrlKey && window.event.keyCode === 90) fn('cz');
  if (window.event.ctrlKey && window.event.keyCode === 89) fn('cy');
  };

3、部分keycode键盘对照表（来源：Keycode对照表（键码对照表）_zqian1994的博客-CSDN博客_keycode）