JavaScript с нуля

Работа с колесиком мыши

Колесико мыши отличается от всего, что мы рассмотрели до этого момента. Очевидная разница в том, что здесь мы уже имеем дело с колесиком, а не кнопкой. Менее же очевидное, но при этом более важное отличие в том, что в данном случае вы используете уже два события для работы. Первое — это mousewheel, используемое в Internet Explorer и Chrome, а второе — это DOMMouseScroll, используемое в Firefox.

Прослушивание этих событий производится обычным образом:

document.addEventListener("mousewheel", mouseWheeling, false);

document.addEventListener("DOMMouseScroll", mouseWheeling, false);

А вот после уже есть нюансы. События mousewheel и DOMMouseScroll будут срабатывать в момент прокручивания колесика в любом направлении. Но для любой практической цели будет важно, в каком направлении происходит прокрутка. Чтобы получить эту информацию, пороемся в обработчике событий и найдем аргумент события.

Аргументы события для события mousewheel содержат свойство под названием wheelDelta. В случае же с DOMMouseScroll в аргументе события присутствует свойство detail. Оба этих свойства похожи в том, что их значения изменяются на положительные или отрицательные в зависимости от направления прокрутки колесика. Здесь стоит отметить, что они не согласованы в трактовке положительного и отрицательного значения. Свойство wheelDelta, связанное с событием mousewheel, становится положительным при прокрутке вверх и отрицательным при прокрутке вниз. В точности наоборот происходит в случае со свойством DOMMouseScroll. При прокрутке вверх оно дает отрицательное значение, а при прокрутке вниз — положительное.

Из следующего примера видна обработка этой несогласованности свойств wheelDelta и detail, которая весьма проста:

function mouseWheeling(e) {

let scrollDirection;

let wheelData = e.wheelDelta;

if (wheelData) {

scrollDirection = wheelData;

} else {

scrollDirection = -1 * e.detail;

}

if (scrollDirection > 0) {

console.log("Scrolling up! " + scrollDirection);

} else {

console.log("Scrolling down! " + scrollDirection);

}

}

Переменная scrollDirection хранит значение, содержащееся в свойстве wheelData или detail. Вы можете определить особое поведение в зависимости от того, является значение положительным или отрицательным.

КОРОТКО О ГЛАВНОМ

Если вы умеете работать с одним событием, то, значит, понимаете основу работы со всеми остальными. Главное — знать, какое событие соответствует нужным вам действиям. Знакомство с событиями мыши — это хорошее начало для освоения работы с событиями в принципе, так как ничего сложного в этом нет. Они не отличаются беспорядочностью, и то, что вы о них узнаете, вы будете использовать практически во всех своих приложениях.

Дополнительные ресурсы и примеры, которые могут вас заинтересовать:

• Перемещение элемента в место клика: http://bit.ly/kirupaElementClickPosition

• Вы используете сенсорное устройство? http://bit.ly/kirupaTouchEnabled

Если у вас есть какие-либо вопросы, уделите им время и обратитесь на форум https://forum.kirupa.com.