Question

我正在使用Mousetrap javascript库，我想捕获特定元素的输入。

场景是我有一个用户名和密码的文本框，KnockoutJS绑定到该文本框，然后当按下按钮时，ajax请求登录用户。现在因为没有形式而且它不是真正的按钮，它是Jquery UI变成按钮的锚，我想知道是否有一些简单的方法来让捕鼠器绑定到元素而不是文件级别。

因此，例如，正常的捕鼠器绑定将是：

Mousetrap.bind('enter', function(event) { CallSomeAjaxMethod(); });

现在，将检查页面上的任何回车键（在文本框元素之外），然后根据它执行某些操作。现在的问题是在这种情况下，我希望只有在特定元素的范围内执行时才能捕获此事件。

所以例如我想做一些事情：

var element = document.getElementById("some-element");
Mousetrap.bind('enter', element, function(event) { CallSomeAjaxMethod(); });

或者更流畅如：

Mousetrap.bind('enter', function(event) { CallSomeAjaxMethod(); }).on(element);

有没有办法做到这一点？我能看到的唯一方法（使用Mousetrap）当前就是让这个文档范围绑定，如果可能的话，只是尝试获取事件被引发的元素。

我知道你可以用Jquery或vanilla js做这类事情但是因为我已经加载了Mousetrap，如果可能的话我想在这里重复使用它。

Answer 1

我想跟进这个。从版本1.5.0（今天发布）开始，现在可以在Mousetrap中本地使用。

对于您上面的具体示例，您只需要

var element = document.getElementById("some-element");
Mousetrap(element).bind('enter', function(event) { CallSomeAjaxMethod(); });

您还可以创建一个新的捕鼠器实例来绑定多个东西。

var mousetrap = new Mousetrap(element);
mousetrap.bind('space', _handleSpace);
mousetrap.bind('enter', _handleEnter);

最重要的是它应该向后兼容，这样所有现有的代码仍然有用。

Answer 2

截至目前，对您的问题的简短回答是没有办法在Mousetrap中本地执行此操作。话虽如此，有几种方法可以解决这个问题。

我不熟悉KnockoutJS，但浏览器是为了让enter键触发表单提交而构建的，所以最优雅的解决方案可能是让你的输入成为表单的一部分，在这种情况下你根本不需要捕鼠器来触发表单提交。您可以在表单提交上调用e.preventDefault()以确保它实际上不会回发到服务器。
如果您将类mousetrap添加到文本输入，那么它将允许它接收键盘快捷键。然后，您可以在回调中检查e.target，看看它是否来自该textarea。这看起来像这样：

<强> HTML
```
<input type="text" name="email" class="mousetrap">
```
<强> JS
```
var input = $('input[name=email]');
Mousetrap.bind('enter', function(e) {
    if (e.target === input[0]) {
        console.log('triggered from input');
    }
});
```

您可以覆盖Mousetrap.stopCallback函数来实现此目的。这不是最漂亮的解决方案，但应该有效。

<强> HTML

<input type="text" name="email">

<强> JS

var input = $('input[name=email]');
var _oldStopCallback = Mousetrap.stopCallback;
Mousetrap.stopCallback = function(e, element, combo) {
    if (combo === 'enter') {
        return element !== input[0];
    }
    return _oldStopCallback(e, element, combo);
}

Mousetrap.bind('enter', function(e) {
    console.log('triggered from input');
});

我正在研究不同的方法，我可以在Mousetrap中支持不同的范围/上下文，所以希望将来会有更简单的方法。

在特定元素上使用捕鼠器？

2 个答案: