how to change or add click function js/css for mobile use

Question

I'm looking to add the ability to use this website on mobile by being clickable as opposed to mouseenter/mouseleave that works well on computers.

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

I've tried using combinations of :active in css and 'click' in js so far in vain. I think it's still right but there is something else that I need to change and I'm not sure what else it is.


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;
}

While on mobile view mode in chrome, I thought I'd be able to click on the next page and obtain the same results as hover (showing the next page and its contents).

Welcome to Stack Overflow. So you want to use `click` instead of `mouseenter`? — Twisty, Jun 13 '19 at 22:22
Possible duplicate of this Q/A: https://stackoverflow.com/questions/22015908/onclick-not-working-on-mobile-touch — Grant Noe, Jun 13 '19 at 23:43

score 0 · Answer 1 · answered Jun 13 '19 at 23:43

What you need to use for mobile is touchstart and touchend:

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

More info: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

how to change or add click function js/css for mobile use

1 Answers1