• ? Github Star: 11.6k^[1]

• ? 官網(wǎng)^[2]

1、Mousetrap 是什么？

Mousetrap 是一個輕量級的 JavaScript 庫，專門用于處理鍵盤快捷鍵。允許開發(fā)者在應用中綁定和管理快捷鍵，支持單個按鍵、組合按鍵、按鍵序列以及自定義快捷鍵，支持指定按鈕的事件方式 keypress、keydown和 keyup。Mousetrap 支持多種瀏覽器，包括IE8+、Firefox、Chrome、Safari 等，并且兼容移動端的觸摸事件。Mousetrap 非常的小壓縮后僅有 4.5kb，沒有任何外部依賴。

Mousetrap 支持幾種類型的按鍵組合。

2、快速開始

Mousetrap 可以通過 npm 和 yarn 安裝，也可以直接下載源碼引入到項目中。

npm install mousetrap
# 
yarn add mousetrap

使用 Mousetrap 的基本步驟包括引入庫文件、綁定快捷鍵到回調函數(shù)，以及在回調函數(shù)中定義當快捷鍵被激活時所執(zhí)行的操作。Mousetrap 提供了 .bind() 和 .bindGlobal() 方法來綁定快捷鍵，前者限制在特定元素上觸發(fā)，后者則在整個文檔范圍內(nèi)有效。

// 單個按鍵的綁定
// 當按下 'g' 鍵時，將調用下面的函數(shù)
Mousetrap.bind('g', function() {
    console.log('你按下了 G');
});
// 組合按鍵的綁定
// 當同時按下 'ctrl' 和 's' 時，將調用下面的函數(shù)
Mousetrap.bind('ctrl+s', function(e) {
    console.log('保存操作');
    // 阻止默認行為，例如瀏覽器的保存快捷鍵
    e.preventDefault();
});
// 跨平臺的組合鍵綁定
// 使用 'mod' 助手可以在 Mac 上映射為 'command+s'，在 Windows 和 Linux 上映射為 'ctrl+s'
Mousetrap.bind('mod+s', function(e) {
    console.log('跨平臺保存操作');
    e.preventDefault();
});
// 按鍵序列的綁定
// 按順序按下 'g', 然后 'i' 將調用下面的函數(shù)
Mousetrap.bind('g i', function() {
    console.log('你按下了 G 然后 I');
});
// Gmail 風格的按鍵序列
// 按順序按下 '*' 和 'a' 將調用下面的函數(shù)
Mousetrap.bind('* a', function() {
    console.log('Gmail 風格的按鍵序列');
});
// Konami 代碼（上下左右 左右 左右 B A）
// 這是一種特殊的按鍵序列，常用于激活彩蛋
Mousetrap.bind('up up down down left right left right b a', function() {
    console.log('Konami Code 被激活');
});
// 阻止默認行為的示例
// 例如，阻止按下 'esc' 時瀏覽器的默認行為
Mousetrap.bind('esc', function(e) {
    e.preventDefault();
    console.log('退出功能');
}, 'keydown');

3、核心 API

Mousetrap 提供很多的 API 幫助開發(fā)者靈活的創(chuàng)建和管理鍵盤快捷鍵，以下幾個核心API：

4、類似的庫

Hotkeys: 6.6k star^[3]：也是一款無依賴的輕量級 JavaScript 鍵盤快捷鍵庫。相對較新的庫，相比 Mousetrap 有更活躍的社區(qū)和更新。

選擇 Mousetrap 還是 Hotkeys 取決于具體的項目需求。如果需要更多的國際化支持、按鍵序列或更高級的 API 功能，Mousetrap 可能是更好的選擇。而如果項目需要快速集成且對 API 簡潔性有較高要求，Hotkeys.js 可能更合適。兩個庫都是開源的，可以根據(jù)個人喜好和項目需求進行選擇。

其他類似庫

• ? Tinykeys：3.6k star^[4]：一個在Web應用中設置和管理鍵盤快捷鍵的JavaScript庫，它比Hotkeys更加輕量級和易于使用。

• ? useHotkeys：2.5k star^[5]: 一個 React Hook，用于在React函數(shù)組件中設置和管理鍵盤快捷鍵。

5、總結

Mousetrap 的優(yōu)勢在于其簡單易用的 API，幫助開發(fā)者快速實現(xiàn)復雜的鍵盤交互功能，而無需編寫大量的鍵盤事件處理代碼，它適用于提高用戶效率的應用場景。如文本編輯器、IDE、游戲以及需要快速導航的應用。通過本文的學習，希望能一起認識 Mousetrap 庫，希望在不久的將來能幫你解決開發(fā)中的實際問題。

祝好！

引用鏈接

[1] Github Star: 11.6k: https://github.com/ccampbell/mousetrap
[2] 官網(wǎng): https://craig.is/killing/mice
[3] Hotkeys: 6.6k star: https://github.com/jaywcjlove/hotkeys-js
[4] Tinykeys：3.6k star: https://github.com/jamiebuilds/tinykeys
[5] useHotkeys：2.5k star: https://github.com/JohannesKlauss/react-hotkeys-hook