Обнаружение колесика мыши на оси 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;​

но есть ли способ, чтобы обнаружить, если пользователь мышкой влево или вправо с помощью мыши?

18
internet-explorer-10 internet-explorer-9 javascript mousewheel scroll

5 ответов

  • на DOMMouseWheel событие в Firefox есть axis собственность.

  • на mousewheel событие в Chrome имеет wheelDeltaX и wheelDeltaY.

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

6

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

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

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

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

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

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

  • deltaX - получает расстояние, которое колесо мыши повернулось вокруг оси x (горизонтально).
  • deltaY - получает расстояние, которое колесо мыши повернулось вокруг оси y (по вертикали).
  • deltaZ - получает расстояние, которое колесо мыши повернулось вокруг ось z.
  • deltaMode - получает значение, указывающее единицу измерения для дельта-значений:
    • DOM_DELTA_PIXEL (0x00) по умолчанию. Дельта измеряется в пикселях.
    • DOM_DELTA_LINE (0x01) Дельта измеряется в строках текста.
    • DOM_DELTA_PAGE (0x02) Дельта измеряется на страницах текста.

Edit: убедитесь, что вы не preventDefault() событие, если event.ctrlKey установлен, в противном случае вы, вероятно, запретить масштабирование страницы. Также, по-видимому, ctrlKey имеет значение true, если вы используете pinch-zoom на сенсорной панели в Chrome и IE.

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

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

для тестирования используйте мышь Microsoft tiltwheel, сенсорную панель прокрутки (жест или зону) или устройство Apple (magic mouse или mighty mouse scrollball). Играйте с различными настройками мыши или тачпада в windows (или предпочтения мыши на OSX при тестировании горизонтальной прокрутки на OSX с Safari).

The знаки Дельта-значений имеют противоположный знак для onwheel и onmousewheel для всех браузеров. В IE значения дельты различны для onwheel и onmousewheel, например (используя мою машину dev с 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 вы используете). А поиск Bugzilla для WM_VSCROLL показывает проблемы, которые могут повлиять на любой браузер (не только Firefox).
47

Я считаю, что вы можете найти "горизонтальные" или x-axis данные из 

event.originalEvent.wheelDeltaX

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

1

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

Bubbling scroll / mousewheel событие

событие.деталь указывает количество "тиков", перемещаемых колесиком мыши.

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

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

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

1

IE поддерживает все из них: колесо | 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, вы можете пересмотреть свой утвержденный ответ в пользу большинство проголосовало с самыми богатыми деталями один. Это поможет будущему посетителю найти правильную информацию и показать вам даже заботу для сообщества!

0