14

Mousetrap JavaScript ライブラリを使用しており、特定の要素の入力をキャプチャしたいと考えています。

シナリオは、KnockoutJS がバインドするユーザー名とパスワード用のテキストボックスがあり、ボタンが押されると、ユーザーをログインするための ajax リクエストが行われます。フォームがなく、実際のボタンではないため、Jquery UI がボタンに変わるアンカーであるため、マウストラップをドキュメント レベルではなく要素にバインドする簡単な方法があるかどうか疑問に思っていました。

たとえば、通常のネズミ捕りバインディングは次のようになります。

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

これで、ページ (テキスト ボックス要素の外側) で Enter キーが押されたかどうかがチェックされ、それに基づいて何かが実行されます。この場合の問題は、特定の要素の範囲内で実行されるときはいつでも、このイベントのみをキャプチャできるようにしたいということです。

たとえば、次のようなことをしたいと思います。

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

複数のものをバインドするために、mousetrap の新しいインスタンスを作成することもできます。

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

何よりも、既存のすべてのコードが引き続き機能するように、下位互換性がある必要があります。

于 2015-03-28T19:14:22.963 に答える