Колесико мышки программирования в JavaScript

Хотя многие люди до сих пор находят эту страницу полезной, произошли некоторые изменения в браузерах с момента последнего обновления этой страницы, и вообще считаю некоторую информацию здесь, чтобы быть устаревшей. Тем не менее, я предлагаю использовать MooTools или другие общие рамки, которые обеспечивают Javascript портативные и обслуживании основой для написания кода Javascript.

Веб-приложения становятся все более и более, как “нормальные” приложений. Конечно, они все более и более функциональными, но гладкий интерфейс пользователя действует первичная роль. Поэтому у нас есть перетаскивания, autocompletition, и многое другое. Многие из тех, полезные свойства, получили возможно только с помощью AJAX.

Эта страница, однако, не об АЯКС (или любой другой словечко). Речь идет о довольно простой метод ввода данных пользователем – колесико мыши. Я считаю, что теперь будет трудно найти мышь без колеса. Подавляющее большинство пользователей используют для колес в качестве контроля для пролистывания списков, масштабирование и т.д. Вместо нескольких веб-приложений, однако, сделать умный использование колеса мыши. Эта страница, чтобы предоставить вам общую информацию об обработке колесо мыши генерируемых событий в языке программирования JavaScript.
Аннотированный код

Ниже приводится аннотированный код JavaScript, который должен объяснить волшебство колесо мыши генерируемые события. Существует также версия для простого копирования и вставки.

/** This is high-level function.
* It must react to delta being more/less than zero.
*/
function handle(delta) {
if (delta < 0)
…;
else
…;
}

/** Event handler for mouse wheel event.
*/
function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
} else if (event.detail) { /** Mozilla case. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail/3;
}
/** If delta is nonzero, handle it.
* Basically, delta is now positive if wheel was scrolled up,
* and negative, if wheel was scrolled down.
*/
if (delta)
handle(delta);
/** Prevent default actions caused by mouse wheel.
* That might be ugly, but we handle scrolls somehow
* anyway, so don't bother here..
*/
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}

/** Initialization code.
* If you use your own event management code, change it as required.
*/
if (window.addEventListener)
/** DOMMouseScroll is for mozilla. */
window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;

Функция обработчика

Дельта на фото. Отрицательные средства вниз, положительные вверх.

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

Практически, у вас есть только, чтобы наблюдать за положительные и отрицательные значения дельты. Эти случаи на фото слева.

Если дельта положительна, колесо прокручивается вверх. Иначе, это было прокручивать вниз.

Отметим, что в приложениях, прокрутка вверх страницы обычно означает, смещается вниз и т.д.

Вы можете спросить, что будет фактических значений дельты быть. В самом деле, код, указанный выше регулируется таким образом, что вы должны получить -1 или +1 в 99% всех случаев. Хотя, например, я видел ± 3 в Firefox, если вы прокрутите очень быстро. Кто-то в Digg сообщили дельте 14, и Джеффри Круз смог получить 76 на его Powerbook трекпад. :-) Конечно, это зависит от чувствительности, что вы установили для вашей мыши. Существует также тонкость в Firefox (по крайней мере): если вы начинаете с помощью колеса прокрутки быстро, а затем нажать на правую кнопку мыши для меню, большим значением дельты Сообщается, например, 30.

Роберт Герлах пишет о своем опыте на сафари, MacOS X: “Для одного повернуться + -0,1, если вы выбросили его быстрее, значения становятся больше. Это потому, что мышь Mac OS ‘/ колеса ускорение. Переместить / включите его один раз, он перемещается / свитков 1 пиксель. Затем мы перейдем / включить его в три раза быстро, и он перемещается / исполнится 30 пикселя “Он также пишет о Камино, который основан на Gecko, тот же двигатель, что Firefox использует:” так же, как Safari (+ – 0,3 до +-бесконечность), который удивляет меня, так как он основан на том же движке, Firefox, которая показывает только + -2,666666 несмотря на скорость “.

Вы также можете посмотреть тестовую страницу, а также длинную страницу теста, то есть с полосами прокрутки – который показывает, как предотвращение работ поведение по умолчанию.

Совместимость

Я написал первую версию настоящего Кодекса, в январе 2006 года. В то время, Firefox и Internet Explorer 6, поддерживались только браузеров. Старые Internet Explorer версии не работают. Благодаря Кейн Бартон для отчетности, что это работает с Firefox 1.0.7 (так возможно начиная с версии 1.0).

Я хотел бы поблагодарить Жана-Люка Milot за вклад заметки о том, чтобы сделать код работает в Opera 9. Эта версия оперы является относительно новым (по состоянию на июль 2006 года); предыдущие версии оперы не поддерживают колесико мышки. Я также благодарен Юрій Чайковський (Юрий Чайковский), которые указывают на то, что в новых версиях Оперы (по крайней мере от 9,20 и выше) вам больше не придется инвертировать знак дельты. Таким образом, поведение такое же, как и в Internet Explorer. Я немного волновался по поводу совместимости с более старыми версиями оперы (хотя опера насильственно рекомендует своим пользователям обновлять раз новая версия выходит), но через некоторое время проходит удалить условный код, который был написан специально для Оперы.

Кроме того, благодаря Эндрю Ширер, Дориан и Джеффри Крузе за указание на то, что код работает в Safari. Андрей упоминает версии 2.0.4, но я не уверен, о более ранних версий. Маркус Rothenbacher написал мне говорили, что Konqueror (по крайней мере до версии 3.5.4) не имеет поддержки колеса мыши.

Дэниел Дэвис из команды по связям с разработчиками в Опере связался со мной в сентябре 2011 года, чтобы сообщить мне, что он не будет больше не нужна, чтобы инвертировать значения дельта в последних версиях Оперы. Хотя я не очень стремится к обновлению этой странице, я с радостью согласился обновить фрагмент кода и удалите эти строки.

Предотвращение код по умолчанию происходит от phpspot.org и Йохан Сундстрем. Вы можете увидеть, как их код работает в длинных тестовую страницу (т.е. с полосами прокрутки). Тем не менее, он работает в IE / Firefox. Он должен работать и в опере, начиная с версии 9.02. (Спасибо Яркко Rantavuori за указание на это.)

Полезно отметить, что Opera, Safari и Firefox включает автоматизированные системы обновление, которое предлагает пользователю обновить до новой версии браузера, когда она станет выпущена, так что вы можете быть готовы к тому, что все больше и больше интернет-пользователей будет иметь браузерах, для которых этот код работает колесо мыши.

Колесо мыши в настоящее время работает на: (с ранней версией известно, работает)

  • Internet Explorer 6
  • Firefox 1.0
  • Opera 9.
  • Safari.

Неподдерживаемых браузерах: (ни одна из существующих версий не поддерживает колесо мыши)

  • Konqueror
  • OmniWeb
  • ICAB

Юзабилити

Не делайте колеса действовать неожиданно. Пользователи знают, что колеса прокручивает список файлов. Если есть список файлов в веб-приложении, используйте его. Некоторые программы используют карты колесо для масштабирования (и так же Google Maps). Поэтому использовать его.
Не заставить пользователей зависит от наличия рабочего колеса. Так же, как это плохая практика, полагаться на JavaScript.
Постарайтесь избавиться от глобальных полосы прокрутки, потому что смешивание их с настоящим Кодексом может вызвать разочарование для пользователей.

Реальные примеры

Если вы знаете, более практичным и интересные примеры, пожалуйста, пришлите мне ссылку.

  • Google Maps использует колесо мыши для увеличения и уменьшения масштаба.
  • ACME Mapper объединяет несколько источников данных, чем оригинальные карты Google.
  • ImageFlow Финном Рудольф

Связанные вещи

  • Болгарский перевод.
  • Итальянский перевод с живой демонстрации, Франческо Napoletano.
  • Перевод на белорусский язык Богдана Зограф.
  • Датский перевод фагоцитировать.
  • Простая поддержка колеса мыши для GWT.

Надеюсь, что это было полезно для вас. Вы можете послать мне замечание, если это было.

Ресурс: Mouse wheel programming in JavaScript

Comments are closed.

Post Navigation