Привет всем! Я работаю над сайтом и хочу добавить эффект наведения для элементов меню на устройствах iOS. Написал небольшой скрипт, но не уверен, что он будет работать правильно. У меня нет возможности протестировать на реальном устройстве. Может кто-нибудь подсказать, верно ли я реализовал это? Вот мой код:
let menuItems = document.querySelectorAll('.menu .submenu .item img');
menuItems.forEach(item => {
item.addEventListener('touchstart', function(event) {
event.preventDefault();
this.classList.add('hover-effect');
});
item.addEventListener('touchend', function() {
this.classList.remove('hover-effect');
});
});
Буду благодарен за любые советы или подсказки по улучшению этого кода для iOS. Спасибо!
Твой подход в целом верный, но есть нюансы. Вместо touchend лучше использовать touchcancel, чтобы эффект пропадал при прерывании касания. Еще советую добавить debounce для touchstart, чтобы избежать случайных срабатываний. И не забудь про fallback для устройств без тачскрина - обычный hover тоже нужен. Кстати, в iOS 13+ появилась поддержка :hover, можешь попробовать чистый CSS для новых версий.
ребят, а я вот недавно столкнулся с похожей задачей. в итоге решил использовать библиотеку hammer.js - она прям супер для работы с тач-событиями на мобилках. там есть готовые жесты типа tap, press, swipe и можно легко настроить под себя. плюс работает кроссбраузерно, что экономит кучу времени на тестах. единственное, надо аккуратно подключать, чтобы не перегружать сайт. но для меню самое то имхо. попробуй, может и тебе зайдет!
Твой код выглядит неплохо, но есть пара моментов. На iOS лучше использовать touchstart вместо hover. Еще можно добавить обработку touchmove, чтобы эффект пропадал при свайпе. И не забудь про cursor: pointer для desktop. А вообще, тестировать на реальном устройстве - самое то. Может, попросишь друга с айфоном помочь?