Question

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

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

Answer 1

您需要在移动设备上使用touchstart和touchend：

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

更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

如何更改或添加点击功能js / css以供移动使用

1 个答案: