Код для использования этого свойства выглядит вполне ожидаемо:
document.addEventListener("mousedown", buttonPress, false);
function buttonPress(e) {
if (e.button == 0) {
console.log("Left mouse button pressed!");
} else if (e.button == 1) {
console.log("Middle mouse button pressed!");
} else if (e.button == 2) {
console.log("Right mouse button pressed!");
} else {
console.log("Things be crazy up in here!!!");
}
}
В дополнение к свойству button существует свойство buttons, а также другие, которые делают нечто похожее для помощи в определении нажатой кнопки. Я не буду много говорить об этих свойствах, просто имейте в виду, что они существуют (вы всегда можете погуглить их).
Работа с колесиком мыши
Колесико мыши отличается от всего, что мы рассмотрели до этого момента. Очевидная разница в том, что здесь мы уже имеем дело с колесиком, а не кнопкой. Менее же очевидное, но при этом более важное отличие в том, что в данном случае вы используете уже два события для работы. Первое — это 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.
Глава 34. События клавиатуры
Работая в приложениях, очень много внимания мы уделяем клавиатуре. Если вдруг вам интересно, как выглядит это устройство, то на рис. 34.1 показан один из экземпляров, вероятно, столетней давности.
Рис. 34.1. Так выглядит музейный экспонат клавиатуры
Как бы то ни было, наши компьютеры (а именно выполняемые на них приложения) умеют взаимодействовать с этими усыпанными клавишами пластиковыми досками. Вас же этот процесс интересует редко. Однако в нашем случае в зависимости от выполняемой задачи думать об этом взаимодействии придется регулярно. Если быть точнее, то придется не только думать о нем, но и научиться его налаживать. Поэтому лучше отмените все ближайшие планы, так как текущая глава будет насыщенной.