Как отличить событие wheel от тачпада и мыши?

Question

[e_asphyx]

Задача следующая: сделать что-то типа переключения слайдов по вращению колеса мыши. Колесо мыши вращается дискретно, и разумно делать переключение по каждому событию wheel, которые соответствуют шагам энкодера колеса. Тачпад же работает непрерывно и генерирует длинную серию событий wheel, так что имеет смысл накапливать перемещение и переключать по превышению заданного смещения. Можно ли как-то различить?

Answer 1

[Денис Букреев]

многие мыши не имеют шага у колесика
у некоторых есть переключатель между ступенчатым вращением колесика и гладким

вообще, пользователи привыкли, что они регулируют скролл страницы, а не скрипты
мне, например, не нравится, когда такая фича устроена на сайтах

надо реализовывать удобство, а не сложность скриптов

Comments

[e_asphyx]

Я делаю то, что меня просили

[Денис Букреев]

e_asphyx: ну иногда стоит объяснить заказчику, чего делать не стоит

[Денис Букреев]

выходит бестолковое утяжеление скрипта, нагрузка на страницу и неудобство пользования

[e_asphyx]

MaxKorz: Я не могу придумать, по каким словам это гуглить. Пока ничего не вижу.

[e_asphyx]

MaxKorz: thnx

Answer 2

[e_asphyx]

Короче, я посмотрел существующие решения, не удовлетворился ими и сделал проще и надёжнее: медианный фильтр плюс таймаут:

this.wheelTimeStamp = 0;
		this.prevDelta = 0;
		this.filterBuf = [];

		this.wheel = function(e) {
			e.preventDefault();
			if(Math.abs(e.originalEvent.deltaY) <= Math.abs(e.originalEvent.deltaX)) return;
			var delta = e.originalEvent.deltaY;
			if(this.filterBuf.length == 15) {
				this.filterBuf.shift();
			}
			this.filterBuf.push(Math.abs(delta) - Math.abs(this.prevDelta));
			var tmpBuf = this.filterBuf.slice();
			tmpBuf.sort();
			var dd = tmpBuf[Math.floor(this.filterBuf.length / 2)];
			this.prevDelta = delta;
			if(dd > 0) {
				if(e.timeStamp - this.wheelTimeStamp > Phy.WheelTimeDelta) {
					this.filterBuf = [];
					this.wheelTimeStamp = e.timeStamp;
					this.scroll(delta < 0 ? "up" : "down");
				}
			}
		};