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

Question

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

场景是我有一个用于用户名和密码的文本框，KnockoutJS 绑定(bind)到该文本框，然后在按下按钮时发出 ajax 请求以登录用户。现在因为没有表单而且它不是一个真正的按钮它是一个 Jquery UI 变成按钮的 anchor 我想知道是否有一些简单的方法可以让捕鼠器绑定(bind)到元素而不是在文档级别。

例如，一个普通的捕鼠器绑定(bind)是:

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)是绑定(bind)此文档范围，如果可能的话，只尝试获取引发事件的元素。

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

Answer 1

我想跟进此事。从版本 1.5.0(今天发布)开始，这现在可以在 Mousetrap 中原生实现。

对于你上面的具体例子，你所要做的就是

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

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

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

最重要的是它应该向后兼容，这样您现有的所有代码仍然可以工作。