Статьи

Как использовать событие колеса мыши на страницах HTML5

Январь 13, 2019

Поддержка колеса мыши может добавить дополнительную интерактивность вашим веб-страницам HTML5. Вместо прокрутки страницы можно выполнить другое действие, например увеличить или уменьшить масштаб.

Просмотрите демонстрационную страницу колеса мыши …

Большинство браузеров поддерживают событие «mousewheel» для любого элемента. Вы можете зарегистрировать функцию обработки, которой передается объект события. Это предоставляет свойство wheelDelta положительное значение для прокрутки вверх или отрицательное значение для прокрутки вниз. Чем больше или меньше значение, тем больше движение.

К сожалению, есть один браузер, который не поддерживает событие «mousewheel». Вы не правы: это Firefox . Mozilla реализовала событие «DOMMouseScroll». Это передает объект события со свойством detailwheelDelta Таким образом, пока Mozilla не примет это событие, у нас будет странная ситуация, когда на самом деле немного проще написать код для IE6! Это не то, что ты слышишь каждый день.

Следует также отметить, что Apple отключает колесо прокрутки в Safari, но поддержка доступна в движке webkit, поэтому ваш код не вызовет никаких проблем.

Добавление обработчика событий колесика мыши

Давайте добавим изображение на нашу веб-страницу, которое будет увеличиваться и уменьшаться в ответ на колесо мыши: 

 
<img id="myimage" src="myimage.jpg" alt="my image" />

Теперь мы можем прикрепить обработчик события mousewheel: 

 
var myimage = document.getElementById("myimage");
if (myimage.addEventListener) {
	// IE9, Chrome, Safari, Opera
	myimage.addEventListener("mousewheel", MouseWheelHandler, false);
	// Firefox
	myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else myimage.attachEvent("onmousewheel", MouseWheelHandler);

Кроссбраузерная функция управления событиями мыши

Наш MouseWheelHandler теперь может определять дельту движения колеса. В этом случае мы собираемся изменить значение detail 

 
function MouseWheelHandler(e) {

	// cross-browser wheel delta
	var e = window.event || e; // old IE support
	var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

Теперь мы можем изменить размер изображения соответственно. Код ниже устанавливает ширину от 50 до 800 пикселей, но вы можете определить естественные размеры изображения и использовать его. 

 
	myimage.style.width = Math.max(50, Math.min(800, myimage.width + (30 * delta))) + "px";

	return false;
}

Наконец, мы возвращаем false, чтобы отменить стандартное событие, которое обычно прокручивает страницу.

Просмотрите демонстрационную страницу колеса мыши …

Код работает в любом браузере, включая IE6, 7 и 8, но пользователи Safari ничего не увидят.

И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как HTML5 и CSS3 для реального мира .

Комментарии к этой статье закрыты. Есть вопрос по HTML? Почему бы не спросить об этом на наших форумах ?

40
Share: