Опять экспериментирую с 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).
Вращение колеса мыши
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.
Комментариев нет:
Отправить комментарий