14

我正在使用 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，如果可能的话，我想在这里重新使用它。

4

2 回答 2

14

我想跟进这件事。从版本 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);

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

于 2015-03-28T19:14:22.963 回答
7

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

  1. 我不熟悉 KnockoutJS，但是浏览器的构建是为了让enter键触发表单提交，所以最优雅的解决方案可能是让您的输入成为表单的一部分，在这种情况下，您根本不需要捕鼠器来触发表单提交。您可以调用e.preventDefault()表单提交以确保它实际上不会发回服务器。

  2. 如果您将类添加mousetrap到文本输入，那么它将允许它接收键盘快捷键。然后，您可以检查e.target您的回调以查看它是否来自该文本区域。这看起来像这样：

    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');
    }
});

  3. 您可以覆盖该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 中不同范围/上下文的不同方法，因此希望将来会有更简单的方法。

于 2013-04-25T18:05:49.543 回答