JavaScript添加快捷键的监听

不知道什么原因使用这种方式添加监听不管用

<template>
  <div @keydown="handleKeyDown">
    <!-- 你的页面内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleKeyDown(event) {
      if (event.ctrlKey && event.key === 'w') {
        event.preventDefault();
        return false;
      }
    }
  }
};
</script>

后来使用了

document.addEventListener('keydown', function(event) {
    // 例如监听 Ctrl+S（保存快捷键）
    if (event.ctrlKey && event.key === 's') {
        console.log('Ctrl+S 被按下');
        // 在这里执行相应的操作
    }
    // 监听其他快捷键可以类似地进行判断
});

由于保密原因无法提供完整代码，需要注意的是，存在递归的情况下要先删除原来的再去执行函数并添加监听，不然会重复执行，最好使用全局变量

// 全局变量存储事件处理函数引用
let globalKeyDownHandler;

function setupGlobalKeyListeners() {
  globalKeyDownHandler = handleKeyDown;
  document.addEventListener('keydown', globalKeyDownHandler);
}

function handleKeyDown(event) {
  // 快捷键处理逻辑...
}

function closeGlobalListeners() {
  try {
    document.removeEventListener('keydown', globalKeyDownHandler);
  } catch (error) {
    console.log('没有可移除的监听器。');
  }
}

// 在需要添加监听器的地方调用 setupGlobalKeyListeners
setupGlobalKeyListeners();

// 在需要移除监听器的地方调用 closeGlobalListeners
closeGlobalListeners();

vue中将函数放到methods中即可，将变量放到data也行，函数访问需要使用this.

原文地址：https://blog.csdn.net/vener_/article/details/143024341

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！