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

Posted 2023-05-08

【中文标题】如何更改或添加点击功能 js/css 以供移动使用

【英文标题】：how to change or add click function js/css for mobile use

【发布时间】：2019-10-28 13:16:23

【问题描述】：

我希望通过可点击添加在移动设备上使用此网站的功能，而不是在计算机上运行良好的 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 的移动视图模式下，我认为我可以单击下一页并获得与悬停相同的结果（显示下一页及其内容）。

【问题讨论】：

欢迎来到 Stack Overflow。所以你想使用click 而不是mouseenter？

此问答可能重复：***.com/questions/22015908/…

【参考方案1】：

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

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

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