▪️ Задача: логика зависит от нажатия кнопок мыши, а также от наведения курсора. Для устройств с сенсорным управлением логика меняется.
✍ События мыши:
▫️
'mouseenter' - мышь наведена▫️
'mouseleave' - мышь убрали с элемента▫️
'mousedown' - нажата любая клавиша мыши🔖 Как определить, какая из клавиш мыши нажата? - Используем свойство
button объекта event, значение event.button укажет на кнопку:▫️
0 - левая кнопка▫️
1 - колесико("средняя" кнопка)▫️
2 - правая кнопка▫️
3,4 - обычно кнопки в браузере Назад и Вперед❗ для кроссбраузерности вам может пригодится используемый в старых браузерах
event.which📙 А как проверить, что у нас устройство с сенсорным экраном?
* мы не можем просто проверять ширину экрана, ведь бывают большие планшеты, а еще можно повернуть экран
▫️ можно проверить поддержку touch:
const supportsTouch = ('ontouchstart' in document.documentElement);Если поддерживает, то
supportsTouch вернет true, если нет - false.Однако, кажется, что этот способ устарел и лучше использовать браузерные
touch-события. Тем более, что там у вас возможностей больше.▫️
'touchstart' - событие касания сенсорного экрана▫️
'touchend' - завершение касания▫️
'touchcancel' - отмена, например, пользователь перешел в интерфейс браузера▫️ -
'touchmove' - движение по сенсорному экрануТакже есть интерфейсы
touch и touchList для обработки касаний🔗 Документация, наведение мыши
🔗 Документация, кнопки мыши
🔗 Документация, сенсорный экран
#js #event