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

Question

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

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;​ 

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

Answer 1

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

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

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

Answer 2

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

event.originalEvent.wheelDeltaX 

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

Answer 3

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

Bubbling scroll/mousewheel event

event.detail определяет количество "тиков", что колесо мыши двигались.

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

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

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

Answer 4

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

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

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

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

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

W3C specification, то Microsoft IE9 documentation for the MouseWheel event и MDN docs указать для onwheel событие:

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

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

обнаружения Характеристика трудно в IE:

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

Чтобы проверить, используйте мышь с сенсорным управлением Microsoft, прокручиваемую сенсорную панель (жест или зону) или устройство 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 установлен» - в соответствии с this article ,

• Различные распространенные драйверы сенсорной панели и мыши разрушают поддержку колесика мыши для браузеров, например. сломанное обнаружение браузера или использование сообщений WM_HSCROLL и WM_VSCROLL вместо сообщений WM_MOUSEWHEEL и WM_MOUSEHWHEEL. Таким образом, драйверы не будут генерировать события колес в браузере (независимо от того, какой браузер вы использовали или какую версию Windows вы использовали). A search of Bugzilla for WM_VSCROLL показывает проблемы, которые могут повлиять на любой браузер (а не только на Firefox).

Answer 5

IE поддерживает все из них: mousewheel | onmousewheel которые являются event handlers, а также WheelEvent (обеспечивает DeltaX, DeltaY, DeltaZ), который является standard Event и MouseWheelEvent interface, который находится в IE9 + also supported (с 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, вы можете вернуться к утверждённому вами утверждению в пользу most voted with most richer details one. Это поможет будущему посетителю найти правильную информацию и показать вам даже заботу о сообществе!