产品观念：更好的捕鼠器_使用捕鼠器创建键盘快捷键

产品观念：更好的捕鼠器

Some of the finest parts of web apps are hidden in the little things.  These "small details" can often add up to big, big gains.  One of those small gains can be found in keyboard shortcuts.  Awesome web apps like Gmail and GitHub use loads of keyboard shortcuts and they make navigating exponentially faster.  After evaluating a few keyboard microlibraries, I've found Mousetrap to be the best!

Web应用程序的某些最佳部分隐藏在小东西中。 这些“小细节”通常可以加在一起，带来很多收获。 这些小的收获之一可以在键盘快捷键中找到。 Gmail和GitHub等出色的网络应用程序使用大量的键盘快捷键，它们可以使导航速度成倍加快。 在评估了几个键盘微库之后，我发现Mousetrap是最好的！

View Demo 查看演示 Get Mousetrap 获取捕鼠器

使用捕鼠器 (Using Mousetrap)

Mousetrap's bind method is the key to the madness, accepting the key(s) to listen to, the callback method, and a specific event to use (if present):

捕鼠器的bind方法是疯狂的关键，它接受要听的键，回调方法和要使用的特定事件(如果存在)：

Mousetrap.bind("s", function(e) {
	// Focus on the search field, do whatever
});

What's immediately nice to see is that you can reference keys by key name and not need to look up key code numbers.  You can listen for multiple keys by adding a + between them:

立即可以看到的是，您可以按键名引用键，而无需查找键代码号。 您可以通过在它们之间添加+来监听多个键：

Mousetrap.bind("shift+k", function() {
	// Create a link
});

You can also listen for key sequences by separating keys with spaces:

您还可以通过使用空格分隔键来监听键序列：

Mousetrap.bind("d a v i d", function() {
	// Alert "FTW"
});

// konami code!
Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([21, 22, 23]);
});

In the case of listening for likewise events, you can pass Moustrap an array:

在侦听类似事件的情况下，可以将数组传递给Moustrap：

Mousetrap.bind(["command+s", "ctrl+s"], function() {
	// Save the form
});

Modifier keys like SHIFT and CONTROL may also be used:

也可以使用SHIFT和CONTROL等修饰键：

Mousetrap.bind("shift+k", function() {
	// Yay for extra key control
});

You can also use keys which require SHIFT without needing to cite the key:

您还可以使用需要SHIFT键，而无需引用该键：

Mousetrap.bind("* _ $", function() {
	// Yay for extra key control
});

Removing event listeners can be done with a simple unbind call, passing the key(s) to which unbind:

可以通过一个简单的取消绑定调用来删除事件监听器，并将取消绑定的密钥传递给：

Mousetrap.unbind("s");

You can ever trigger an event if you'd like:

您可以根据需要触发事件：

Mousetrap.trigger("s");

Essentially you get maximum control over key events.  Mousetrap even provides a more advanced functionality if you need it, so check out the official documentation to learn more.

本质上，您可以最大程度地控制关键事件。 如果需要，捕鼠器甚至可以提供更高级的功能，因此请查阅官方文档以了解更多信息。

View Demo 观看演示

Mousetrap is an awesome utility:  simple, useful, and tiny.  You can probably get away with avoid this micro-library if you only have a few keys to listen for, but if you're looking to do advanced keyboard handling and navigation, Mousetrap is perfect.

捕鼠器是一个了不起的实用程序：简单，有用并且很小。 如果您只需要听一些按键，则可以避免使用此微型库，但是，如果您要进行高级键盘处理和导航，Mousetrap非常适合。

翻译自: https://davidwalsh.name/keyboard-shortcuts

产品观念：更好的捕鼠器