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

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

Blink/Webkit: поддержка с Chrome 31/Safari 7 для события onwheel. В противном случае используйте события onmousewheel и свойства event.wheelDeltaX и event.wheelDeltaY. Хром /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, которая может влиять на все различные события колеса.

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

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

спецификация W3C, Документация 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) Дельта измеряется на страницах текста.

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

Обнаружение функции сложно в IE:

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

Чтобы протестировать, используйте мышь для мыши с титром, прокручиваемую сенсорную панель (жест или зону) или устройство Apple (волшебная мышь или мощный мышиный прокрутка). Играйте с различными настройками мыши или тачпада в окнах (или предпочтениями мыши на OSX, если вы тестируете горизонтальную прокрутку на OSX с помощью Safari).

Знаки дельта-значений имеют противоположный знак для 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 вы использовали). A поиск Bugzilla для WM_VSCROLL показывает проблемы, которые могут повлиять на любой браузер (а не только на Firefox).

Ответ 3

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

event.originalEvent.wheelDeltaX

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

Ответ 4

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

Событие прокрутки /mousewheel для пузырей

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

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

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

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

Ответ 5

IE поддерживает их все: mousewheel | onmousewheel, которые являются обработчиками событий, а также WheelEvent (предоставляет DeltaX, DeltaY, DeltaZ), который является стандартным событием и MouseWheelEvent interface, который также поддерживается в 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, вы можете вернуться к одобренному вами утверждению в пользу наиболее проголосовавшего с наиболее богатыми подробностями. Это поможет будущему посетителю найти правильную информацию и показать вам даже заботу о сообществе!