Обнаружение колесика мыши по оси x (слева и справа) с помощью Javascript

Я знаю, что можно обнаружить вверх и вниз, например.

    function handle(delta) {
    if (delta < 0) {
        alert('down');
} else {
    alert('up');
    }
}

function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
        delta = event.wheelDelta/120; 
    } else if (event.detail) {
        delta = -event.detail/3;
    }
    if (delta)
        handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code. */
if (window.addEventListener)
    window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;​

Но есть ли способ определить, двигалась ли мышь пользователя влево или вправо с помощью колесика мыши?


person bob_cobb    schedule 30.05.2012    source источник
comment
Вы хотите знать, повернулось ли «мышь» или «колесико мыши» влево или вправо? Не все колесики мыши ходят влево и вправо.   -  person aglassman    schedule 30.05.2012
comment
@aglassman Хороший вопрос. Просто колесико мыши.   -  person bob_cobb    schedule 30.05.2012
comment
@bob_cobb, вы можете пересмотреть свой утвержденный ответ в пользу наиболее проголосовавшего с наиболее подробным ответом. Это поможет будущему посетителю найти правильную информацию и продемонстрирует вашу заботу о сообществе!   -  person Annie    schedule 25.02.2015


Ответы (5)


  • Событие DOMMouseWheel в Firefox имеет свойство axis.

  • Событие mousewheel в Chrome имеет wheelDeltaX и wheelDeltaY.

  • К сожалению, я не могу найти эквивалентное свойство для событий IE (тестирование в IE9).

person apsillers    schedule 30.05.2012
comment
Спасибо. Я посмотрю, не смогу ли я найти что-нибудь для IE. - person bob_cobb; 30.05.2012

Internet Explorer: в IE9 и IE10 вы должны использовать событие onwheel (не onmousewheel и не DOMMouseScroll) с помощью addEventListener, чтобы иметь возможность обнаруживать прокрутку горизонтального колеса из DOM. Используйте значение event.deltaX вместе со значением event.deltaMode для обнаружения горизонтального вращения мыши (для вертикального вращения используйте значение event.deltaY). Для ‹= IE8 используйте событие onmousewheel и event.wheelDelta (для старых версий IE поддерживается только прокрутка мыши по оси Y).

Blink/Webkit: поддержка события onwheel, начиная с Chrome 31/Safari 7. В противном случае используйте событие onmousewheel и свойства event.wheelDeltaX и event.wheelDeltaY. Трюк только для Chrome/Safari: использование клавиши SHIFT во время прокрутки мыши влево/вправо (полезно для тестирования).

Firefox: Firefox 17 и выше поддерживает событие onwheel. Для поддержки более старых версий Firefox (до 3.6) используйте устаревшее DOMMouseScroll, а также свойства event.axis и event.detail для поддержки горизонтальной прокрутки. (Firefox Mobile: документы подразумевают, что событие onwheel будет срабатывать при панорамировании с помощью сенсорного устройства. Я не пробовал.). В Firefox также есть событие MozMousePixelScroll. Документация MDN также дает рекомендуемый код для обработки различных событий в разных браузерах. Firefox также имеет конфигурацию mousewheel.enable_pixel_scrolling, которая может влиять на все различные события колеса.

Проверьте событие onwheel самостоятельно, используя тестер событий колеса от QuirksMode. Я видел, как это работает, используя IE9 в Win7 и IE10 в Windows 8 (предварительная версия, версия IE 10.0.8400.0). Чтобы настроить новое стандартное событие onwheel:

  • Выберите радио addEventListener (захват).
  • Отключить прокрутку.
  • Отключить колесико мыши.
  • Оставьте колесо включенным.
  • Установите флажок Показать свойства события в нижней части правого столбца.
  • Используйте F12 и убедитесь, что документ находится в стандартах documentMode IE9 или IE10 Standards.
  • Проведите мышью по центральному столбцу и увидите, что события колесика регистрируются в левом столбце, а сведения о событиях колесика отображаются внизу правого столбца.
  • Иногда вам может потребоваться снять и снова установить флажок события колеса, чтобы получить события (не знаю, почему: может быть, ошибка на странице quirksmode или в IE?)

спецификация W3C, документация Microsoft IE9 для события MouseWheel и документы MDN укажите для события onwheel:

  • deltaX — Получает расстояние, на которое колесико мыши повернулось вокруг оси X (по горизонтали).
  • deltaY — Получает расстояние, на которое колесико мыши повернулось вокруг оси Y (по вертикали).
  • deltaZ — Получает расстояние, на которое колесико мыши повернулось вокруг оси Z.
  • deltaMode - Gets a value that indicates the unit of measurement for delta values:
    • DOM_DELTA_PIXEL (0x00) Default. The delta is measured in pixels.
    • DOM_DELTA_LINE (0x01) Дельта измеряется в строках текста.
    • DOM_DELTA_PAGE (0x02) Дельта измеряется в страницах текста.

Изменить: убедитесь, что вы НЕ предотвращаете событие Default(), если установлено event.ctrlKey, иначе вы, вероятно, предотвратите масштабирование страницы. Также очевидно, что для ctrlKey установлено значение true, если вы используете масштабирование на сенсорной панели в Chrome и IE.

Обнаружение функций в IE затруднено:

  • В IE10 с IE8 documentMode 'onwheel' in document возвращает true, но кажется, что никакие события не запускаются для горизонтального или вертикального события onwheel.
  • В IE9 'onwheel' in document возвращает false, но событие onwheel работает (я думаю, что document.documentMode === 9 следует проверять перед использованием события onwheel в IE9).
  • В IE9 и IE10 традиционный document.onwheel = 'somefunc(event)' не работает даже в documentMode 9 или 10 (т.е. похоже, что вы можете использовать только addEventListener).

Для тестирования используйте мышь Microsoft с наклонным колесом, сенсорную панель с прокруткой (жест или зону) или устройство Apple (волшебную мышь или мощный шарик прокрутки мыши). Поэкспериментируйте с различными настройками мыши или сенсорной панели в Windows (или настройками мыши в OSX при тестировании горизонтальной прокрутки в OSX с Safari).

Знаки значений дельты имеют противоположный знак для onwheel и onmousewheel для всех браузеров. Например, в IE значения дельты для onwheel и onmousewheel различны (используя мою машину разработчика с IE9 с очень стандартной мышью Microsoft):

  • event.deltaY было 111 в Win8 или 72 в Win7 для события onwheel, прокручивающегося на одну ступень вниз. Значение немного меняется при увеличении, но есть и другой фактор, который я не могу понять (похоже, это не размер шрифта).
  • event.wheelDelta было -120 для события onmousewheel, прокручиваемого на одну ступень вниз.

  • Для Windows XP «Мы должны добавить поддержку сообщения WM_MOUSEHWHEEL, чтобы это работало [, поддержка] была добавлена ​​в Vista, поэтому, если вы используете XP, вам необходимо установить IntelliType Pro и/или IntelliPoint» — согласно эту статью.

  • Различные распространенные драйверы сенсорной панели и мыши нарушают поддержку колесика мыши для браузеров, например. неработающее обнаружение браузера или использование сообщений WM_HSCROLL и WM_VSCROLL вместо сообщений WM_MOUSEWHEEL и WM_MOUSEHWHEEL. Таким образом, драйверы не будут генерировать события колеса в браузере (независимо от того, какой браузер вы использовали или какую версию Windows вы использовали). поиск WM_VSCROLL в Bugzilla показывает проблемы, которые могут повлиять на любой браузер (не только на Firefox). ).
person Community    schedule 12.10.2012
comment
Этот ответ - лучший ресурс, который я нашел по этому вопросу. Спасибо за прекрасную исследовательскую работу. +1 - person kikito; 14.02.2013

Я считаю, что вы можете найти «горизонтальные» данные или данные по оси x из

event.originalEvent.wheelDeltaX

Вы должны отладить код и посмотреть, какие свойства имеет объект события во время выполнения. Это должно подтвердить или опровергнуть, существует ли это свойство. Оттуда нужно просто определить, отличается ли значение.

person aglassman    schedule 30.05.2012
comment
Проверьте этот ответ. stackoverflow.com/questions/8212851/ - person aglassman; 30.05.2012

Проверьте принятый ответ для получения дополнительных ссылок и информации.

Событие пузырьковой прокрутки/колеса мыши

event.detail указывает количество тактов, на которое перемещалось колесико мыши.

Положительные значения означают вниз/вправо, отрицательные вверх/влево.

event.axis указывает ось жеста прокрутки (горизонтальную или вертикальную). Этот атрибут был добавлен в Firefox 3.5.

Chrome реализует то же поведение, что и IE AFAIK. В IE и Chrome: используйте e.wheelDeltaX и e.wheelDeltaY.

person Knyri    schedule 30.05.2012

IE поддерживает все из них: mousewheel | onmousewheel, которые являются обработчики событий, а также WheelEvent (предоставляет DeltaX, DeltaY, DeltaZ), который является стандартное событие и MouseWheelEvent интерфейс, который также является поддерживается в IE9+ (с WheelDelta и рядом других свойств, связанных с координатами x, y).

Проверено на IE11.

Связано: Сегодня, когда стандарт сенсорных событий окончательно формализован, оказалось, что IE11 уже поддерживает большую его часть: http://blogs.msdn.com/b/ie/archive/2015/02/24/pointer-Events-w3c-recommendation-interoperable-touch-and-removing-the-dreaded-300ms-tap-delay.aspx.

Кроме того: @bob_cobb, вы можете пересмотреть свой утвержденный ответ в пользу самого проголосовавшего с наиболее подробной информацией. Это поможет будущему посетителю найти правильную информацию и продемонстрирует вашу заботу о сообществе!

person Annie    schedule 25.02.2015