Korzystanie z pułapki na myszy na konkretnym elemencie?

Question

Używam biblioteki javascript Mousetrap i chcę przechwytywać dane wejściowe dla określonego elementu.

Scenariusz: Mam pole tekstowe dla nazwy użytkownika i hasła, z którymi łączy się KnockoutJS, a następnie po naciśnięciu przycisku wykonywane jest żądanie ajax w celu zalogowania użytkownika. Teraz, gdy nie ma formy, a nie jest to prawdziwy przycisk, który Jquery UI zamienia się w przycisk, zastanawiałem się, czy istnieje prosty sposób, aby pułapka na myszy została powiązana z elementem, a nie na poziomie dokumentu.

Tak na przykład normalne wiązania pułapka byłoby:

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

Teraz będzie sprawdzał każdy wprowadzić naciśnij klawisz na stronie (na zewnątrz elementu tekstowego), a następnie zrobić coś w oparciu o niego. Teraz problem polega na tym, że chcę móc TYLKO przechwycić to zdarzenie, gdy tylko zostanie ono wykonane w ramach określonego elementu.

Tak na przykład będę chciał coś zrobić dużej litery:

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

czy może bardziej płynnie jak:

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

Czy istnieje jakiś sposób, aby to zrobić? Jedynym sposobem, w jaki mogę to zrobić (za pomocą Mousetrap) jest obecnie powiązanie tego zakresu dokumentu i po prostu spróbuj uzyskać element, na którym zostało ono podniesione, jeśli jest to możliwe.

Wiem, że możesz robić takie rzeczy z Jquery lub vanilla js, jednak ponieważ mam już załadowany Mousetrap, chciałbym go użyć tutaj, jeśli to możliwe.

Answer 1

Chciałem śledzić to. Od wersji 1.5.0 (wydanej dzisiaj) jest to teraz możliwe w trybie pułapki na myszy.

dla konkretnego przykładu nade wszystko trzeba zrobić, to

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

Można również utworzyć nową instancję pułapka związać kilka rzeczy.

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

Najlepszy ze wszystkich powinien być kompatybilny wstecz, aby cały istniejący kod nadal działał.

Answer 2

W tej chwili krótka odpowiedź na twoje pytanie jest taka, że ​​nie można tego zrobić w sposób macierzysty w pułapce na myszy. Biorąc to pod uwagę, istnieje kilka sposobów, aby się do tego zbliżyć.

1. nie jestem zaznajomiony z KnockoutJS, ale przeglądarek są zbudowane pozwolić klawisz spustu enter formę przedstawienia więc najbardziej eleganckim rozwiązaniem byłoby prawdopodobnie dokonać wejść część postaci, w której przypadku nie w ogóle potrzebuje pułapki na myszy, aby wywołać formularz. Możesz zadzwonić pod numer e.preventDefault() po przesłaniu formularza, aby upewnić się, że nie jest on wysyłany z powrotem na serwer.

2. Dodanie do wpisu tekstowego klasy mousetrap umożliwia jej odbiór skrótów klawiaturowych. Następnie możesz sprawdzić, czy w twoim oddzwonieniu jest e.target, czy pochodzi z tego obszaru tekstowego. To coś będzie wyglądać następująco:

   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. Można by zastąpić funkcję Mousetrap.stopCallback do osiągnięcia tego celu. To nie jest najładniejsze rozwiązanie, ale powinno działać.

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

szukam w różny sposób mogę wesprzeć różnych zakresów/kontekstów w Pułapka na myszy, więc mam nadzieję, że nie będzie łatwiejszy sposób w przyszłości.