JavaScript. Подробное руководство, 6-е издание

В Firefox вместо события «mousewheel» можно обрабатывать нестандартное событие «DOMMouseScroll» и использовать свойство detail объекта события вместо wheelDelta. Однако масштаб и знак изменения свойства detail отличается от wheelDelta: чтобы получить значение, эквивалентное значению свойства wheelDelta, свойство detail нужно умножить на -40.

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

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

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

  <script src="whenReady.js"></script>
  <script src="Enclose. js"x/script>
  <script>
   whenReady(function {
   enclose(document.getElementById("content"). 400,200, -200, -300);
   });
  </script>
  <style>div.enclosure { border: solid black 10px; margin: 10px; }</style>
  <img id="content" src="testimage.jpg"/>

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

47

Довольно рискованное решение: если будущие версии стандарта не будут соответствовать проекту спецификации, имевшейся на момент написания этих строк, это может привести к нежелательным последствиям и сделать пример неработоспособным.

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

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

  // Заключает элемент содержимого в фрейм, или видимую область заданной ширины
  // и высоты (минимальные размеры 50x50). Необязательные аргументы contentX
  // и contentY определяют начальное смещение содержимого относительно кадра.
  // (Их значения должны быть <= 0.) Фрейму придается обработчик события mousewheel,
  // который позволяет пользователю прокручивать элемент и изменять размеры фрейма,
  function enclose(content, framewidth, frameheight, contentX, contentY) {
   // Эти аргументы являются не только начальными значениями: они хранят информацию
   // о текущем состоянии, изменяются и используются обработчиком события mousewheel.
   framewidth = Math.max(framewidth, 50);
   frameheight = Math.max(frameheight, 50);
   contentX = Math.min(contentX, 0) || 0;
   contentY = Math.min(contentY, 0) || 0;

   // Создать фрейм и определить для него стили и имя класса CSS
   var frame = document.createElement("div");
   frame.className = "enclosure"; // Благодаря этому можно определять стили
   // в таблицах стилей
   frame.style.width = framewidth + "px"; // Установить размеры фрейма,
   frame.style.height = frameheight + "px";
   frame.style.overflow = "hidden"; // Без полос прокрутки
   frame.style.boxSizing = "border-box"; // модель border-box упрощает
   frame.style.webkitBoxSizing = "border-box"; // вычисление новых размеров
   frame.style.MozBoxSizing = "border-box"; // фрейма.

   // Добавить фрейм в документ и поместить в него элемент elt.
   content.parentNode.insertBefore(frame, content);
   frame.appendChild(content);

   // Координаты элемента относительно фрейма
   content.style.position = "relative";
   content.style.left = contentX + "px";
   content.style.top = contentY + "px";

<