8 авг. 2012 г.

События resize и mouse wheel в разных браузерах

Опять экспериментирую с fixed headers (это такие хитрые скрипты, которые фиксируют заголовок таблицы или текста у верхней границы экрана при прокрутке вниз, в интернетах существует много вариантов, но мне ни один не подходит - они все работают только на прокрутку окна браузера, а у меня длинная таблица внутри div со стилем overflow:auto). Все браузеры имеют свои особенности при генерации интересующих меня событий изменения размера окна (resize) и вращения колеса мыши (mousewheel).

Изменение размера окна

Браузер                observer            target
Chrome 20              window (2 события)  window
Safari 5.1             window              window
Opera 9.64, 10.10      document            document
Opera 9.64, 10.10      window              window
Opera 10.63            window (2 события)  document
Opera 11.11, 11.50, 12 document, window    document
Firefox 3.6, 13, 14    window              window
IE 6                   window (3 события)  window.parent
IE 7, 8                window (2 события)  window.parent
IE 9                   window              window

Примечания

  • В колонке observer перечислено, кто, в какой последовательности и сколько событий получает.
  • В колонке target указаны элементы, содержащиеся в получаемом объекте события.
  • Событие для всех браузеров называется одинаково - resize.
  • Chrome 20, Opera 10.63, IE 7, IE 8 генерируют два события при однократном изменении размера окна (разворачивании на весь экран, открытии/закрытии Web Inspector/Dragonfly и т.п.), IE 6 генерирует сразу 3 события.
  • В Opera 9.64 и 10.10 при изменении размера окна сначала document получает событие resize, в котором указан document, затем window получает событие resize, в котором указан window.
  • В Opera начиная где-то с 11.11 событие получают сначала document, затем window, при этом в самом событии в отличие от других браузеров как target указан document.
  • В IE 6, IE 7, IE 8 объект класса Window в полученном событии является не объектом window, а объектом window.parent (event.target !== window && event.target === window.parent).

Вращение колеса мыши

Браузер                событие        observer
Chrome 20, Safari 5.1  mousewheel     document, window
Opera 9.64, 10.10      mousewheel     window, document
Opera 10.63            mousewheel     document (2 события)
                                      window (2 события)
Opera 11.11, 11.50, 12 mousewheel     document, window
Firefox 3.6 - 14       DOMMouseScroll document, window
IE 6, 7, 8             mousewheel     document
IE 9                   wheel          document, window
IE 9                   mousewheel     document, window

Примечания

  • В колонке observer перечислено, кто, в какой последовательности и сколько событий получает.
  • Получатели событий указаны в том порядке, в котором они вызываются.
  • В Opera 10.63 на каждый поворот колеса мыши два раза вызывается обработчик на document, затем два раза на window.
  • Firefox - единственный, кто работает с DOMMouseScroll.
  • В IE9 сначала document и window получают событие wheel, затем document и window получают событие mousewheel.
  • IE9 - единственный, кто уже поддерживает событие wheel.

Мораль

Слушаем событие mousewheel на document, а resize - на window.

Комментариев нет:

Отправить комментарий