javascript - 如何更改或添加用于移动使用的点击功能js/css

我希望通过单击来增加在移动设备上使用此网站的功能，而不是在计算机上可以正常工作的mouseenter / mouseleave。

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

到目前为止，我已经尝试在CSS中使用：active和js中的'click'的组合。我认为这仍然是正确的，但是还有一些我需要更改的地方，我不确定还有什么。


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中的移动查看模式下，我认为我可以单击下一页，并获得与悬停相同的结果（显示下一页及其内容）。

最佳答案

您需要用于移动设备的是touchstart和touchend：

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