Чтение онлайн

Самым важным здесь является атрибут

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

Все современные броузеры поддерживают колесико мыши и возбуждают событие «mousewheel», когда пользователь вращает его. Броузеры часто используют колесико мыши для прокрутки документа или изменения масштаба отображения, но вы можете отменить событие «mousewheel», чтобы предотвратить выполнение этих действий по умолчанию.

Существует множество проблем совместимости, связанных с событиями «mousewheel», тем не менее вполне возможно написать программный код, действующий на всех платформах. На момент написания этих строк все броузеры, кроме Firefox, поддерживали событие с именем «mousewheel». В Firefox это событие называется «DOMMouseScroll». А в проекте спецификации «DOM Level 3 Events» предложено имя «wheel» вместо «mousewheel». Вдобавок к разным именам события различаются и имена свойств объектов, передаваемых с этими различными событиями, которые определяют величину поворота колесика. Наконец, следует отметить, что существуют также важные отличия в аппаратной реализации колесиков в разных мышах. Некоторые колесики могут вращаться только в одной плоскости, назад и вперед, а некоторые (особенно в мышах компании Apple) могут вращаться также влево и вправо (в действительности такие «колесики» являются трекболами (trackball)). Стандарт «DOM Level 3» даже включает поддержку «колесиков», которые могут вращаться в трех плоскостях - по или против часовой стрелки вдобавок к вращению вперед/назад и влево/вправо.

Объект события, передаваемый обработчику события «mousewheel», имеет свойство

, определяющее величину прокрутки колесика. Один «щелчок» колесика в направлении от пользователя обычно соответствует значению 120, а один щелчок в направлении к пользователю - значению -120. В Safari и Chrome для поддержки мышей компании Apple, имеющих трекбол вместо колесика, вращающегося в одной плоскости, вдобавок к свойству объект события имеет свойства и , при этом значения свойств и всегда совпадают.

В Firefox вместо события «mousewheel» можно обрабатывать нестандартное событие «DOMMouseScroll» и использовать свойство

объекта события вместо . Однако масштаб и знак изменения свойства отличается от : чтобы получить значение, эквивалентное значению свойства , свойство нужно умножить на -40.

На момент написания этих строк проект стандарта «DOM Level 3 Events» определял стандартное событие с именем «wheel» как стандартизованную версию событий «mousewheel» и «DOMMouseScroll». Согласно спецификации, объект, передаваемый обработчику события «wheel», должен иметь свойства

и , определяющие величину прокрутки колесика в трех плоскостях. Значения этих свойств следует умножать на -120, чтобы получить значение и знак события «mousewheel».

Для всех этих типов событий объект события напоминает объекты событий мыши: он включает координаты указателя мыши и состояние клавиш-модификаторов на клавиатуре.

Пример 17.3 демонстрирует, как обрабатывать события колесика мыши и как обходить проблемы совместимости. В нем определяется функция с именем

которая обертывает в «кадр» или «видимую область» заданного размера более крупный элемент (такой как изображение) и определяет обработчик события колесика мыши, который позволяет пользователю прокручивать элемент в пределах видимой области и изменять размеры этой области. Эту функцию можно использовать, как показано ниже:

Для обеспечения корректной работы во всех основных броузерах в примере 17.3 выполняется проверка типа броузера (раздел 13.4.5). Пример опирается на положения спецификации «DOM Level 3 Events» и включает программный код, который будет использовать событие «wheel», когда его поддержка будет реализована в броузерах. [47]

Он также включает дополнительную проверку на будущее, чтобы не использовать событие «DOMMouseScroll», если Firefox начнет использовать событие «wheel» или «mousewheel». Обратите внимание, что пример 17.3 также является практическим примером управления геометрией элементов и использования приемов позиционирования средствами CSS, о которых рассказывалось в разделах 15.8 и 16.2.1.

Пример 17.3. Обработка событий «mousewheel»