Pracując ze zdarzeniami przeglądarki, zacząłem stosować touchEvents Safari dla urządzeń mobilnych. Uważam, że addEventListener
łączą się z warunkami. Ten projekt nie może używać JQuery.
Standardowy odbiornik zdarzeń:
/* option 1 */
window.addEventListener('mousemove', this.mouseMoveHandler, false);
window.addEventListener('touchmove', this.mouseMoveHandler, false);
/* option 2, only enables the required event */
var isTouchEnabled = window.Touch || false;
window.addEventListener(isTouchEnabled ? 'touchmove' : 'mousemove', this.mouseMoveHandler, false);
JQuery bind
pozwala na wiele zdarzeń, takich jak:
$(window).bind('mousemove touchmove', function(e) {
//do something;
});
Czy istnieje sposób na połączenie dwóch detektorów zdarzeń, jak w przykładzie JQuery? dawny:
window.addEventListener('mousemove touchmove', this.mouseMoveHandler, false);
Wszelkie sugestie i wskazówki są mile widziane!
javascript
jquery
touch
addeventlistener
johnkreitlow
źródło
źródło
Odpowiedzi:
W POJS w danym momencie dodajesz jednego słuchacza. Nie jest powszechne dodawanie tego samego detektora dla dwóch różnych zdarzeń w tym samym elemencie. Możesz napisać własną małą funkcję do wykonania pracy, np:
Mam nadzieję, że to pokazuje koncepcję.
Edycja 2016-02-25
Komentarz Dalgarda skłonił mnie do ponownego odwiedzenia tego. Wydaje mi się, że dodanie tego samego detektora dla wielu zdarzeń w jednym elemencie jest teraz bardziej powszechne, aby objąć różne używane typy interfejsów, a odpowiedź Isaaca oferuje dobre wykorzystanie wbudowanych metod w celu zredukowania kodu (chociaż mniej kodu jest samo w sobie niekoniecznie bonus). Rozszerzone o funkcje strzałkowe ECMAScript 2015 daje:
Podobna strategia mogłaby dodać ten sam detektor do wielu elementów, ale potrzeba zrobienia tego może być wskaźnikiem delegowania zdarzeń.
źródło
"It is not common to add the same listener for two different events on the same element."
Czasami (bardziej ekologiczni) deweloperzy muszą to usłyszeć, aby wiedzieć, że robią to dobrze :)Trochę zwartej składni, która osiąga pożądany wynik, POJS:
źródło
['mousemove', 'touchmove'].forEach(...)
['mousemove', 'touchmove'].forEach(function(event) { window.addEventListener(event, handler);});
byłby nie tylko o wiele bardziej czytelny, ale także znacznie szybszy bez konieczności dzielenia ciągu znaków i uruchamiania funkcji dla każdego elementu w wynikowej tablicy.Porządkowanie odpowiedzi Izaaka:
EDYTOWAĆ
Funkcja pomocnicza ES6:
źródło
Dla mnie; ten kod działa dobrze i jest najkrótszym kodem do obsługi wielu zdarzeń z tymi samymi (wbudowanymi) funkcjami.
źródło
ES2015:
źródło
for...of
pętliMam dla Ciebie prostsze rozwiązanie:
Przetestowałem to i działa świetnie, z drugiej strony jest kompaktowy i nieskomplikowany, jak inne przykłady tutaj.
źródło
AddEventListener pobiera prosty ciąg reprezentujący event.type . Musisz więc napisać niestandardową funkcję do iteracji po wielu zdarzeniach.
Jest to obsługiwane w jQuery za pomocą .split (""), a następnie iteracji po liście, aby ustawić eventListeners dla każdego
types
.źródło
Jeden sposób, jak to zrobić:
źródło