как изменить или добавить функцию щелчка js / css для мобильного использования - PullRequest
Новая
       29

как изменить или добавить функцию щелчка js / css для мобильного использования

0 голосов
/ 14 июня 2019

Я хочу добавить возможность использовать этот веб-сайт на мобильных устройствах, щелкая по ним, а не mouseenter / mouseleave, который хорошо работает на компьютерах.

https://codepen.io/chabco/pen/YoyVdO

Я пробовал использовать комбинации: active в css и click в js до сих пор безуспешно. Я думаю, что это все еще правильно, но есть кое-что еще, что мне нужно изменить, и я не уверен, что еще это. 


page.forEach(function(thePage){
    thePage.addEventListener('mouseenter', function() {
        page[0].classList.remove('hoverin');
        thePage.classList.add('hoverin');
    });
    thePage.addEventListener('mouseleave', function() {
        thePage.classList.remove('hoverin');
        page[0].classList.add('hoverin');
    });
});



.page:nth-child(1):hover {
    grid-column: 1 / span 8;
}

В мобильном режиме просмотра в Chrome я думал, что смогу щелкнуть следующую страницу и получить те же результаты, что и при наведении курсора (отображение следующей страницы и ее содержимого).

1 Ответ

0 голосов
/ 14 июня 2019

Что вам нужно использовать для мобильных устройств: touchstart и touchend: 

thePage.addEventListener('click touchstart', function() {});
thePage.addEventListener('click touchend', function() {});

Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

...