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

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或香草JS.

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中本地执行此操作.话虽如此,有几种方法可以解决这个问题.

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

2. 如果您将类添加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');
       }
   });
   

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中支持不同的范围/上下文,所以希望将来会有更简单的方法.