Javascript 点击'；a'；navbar中的元素被卡在触摸模式下，但在其他情况下工作正常

stackoverflow的第一篇帖子

我有一个项目，在完成之前还有一个问题。 我用JS编写了一个动态生成的导航条 我这样做是为了，当点击“a”元素时，它会平滑地滚动到“a”链接的部分。（检查函数scrollTo（）。 除此之外，我还有另一个函数，它检查一个部分是否在portview中，如果它在portview中，那么它应该为该部分激活一个活动类，并在导航栏中高亮显示“a”项。 这样做的目的当然是为了改进用户体验

除了在谷歌Chroe devops的手机/ipad设备上试用时出现的一个问题外，该代码工作正常。 当单击“a”项并将其滚动到右侧功能后，单击的“a”项将按其应高亮显示；当在视线周围滚动时，视口中的右侧部分将按其应高亮显示在导航栏中，但单击的“a”项仍将高亮显示。 就像是黏糊糊的

我无法将我的大脑缠绕在它周围，我想这可能是因为它是一种触摸，因为它在非触摸模式下工作得非常完美

代码如下：

function scrollTo() {
for (let anchor of anchors) {
    anchor.addEventListener('click', function(e){
        e.preventDefault();
        sectionId = anchor.getAttribute('href');
        elementToScroll = document.getElementById(sectionId);
        elementToScroll.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });
    });
} }

function makeActive() {
for (let section of sections) { 
    let attr = section.getAttribute('id');
    let a = document.querySelector(`[href="${attr}"]`);
    let box = section.getBoundingClientRect(); 
    if (box.top <= 150 && box.bottom >= 150) { 
        section.classList.add('your-active-class');
        a.classList.add('menu__link__active');
    }
    else {
        section.classList.remove('your-active-class');
        a.classList.remove('menu__link__active');
    }
} }


document.addEventListener('scroll', (e) => {
makeActive(); });

函数scrollTo（）{
用于（让锚定在锚定中）{
anchor.addEventListener（'click'，函数（e）{
e、 预防默认值（）；
sectionId=anchor.getAttribute（'href'）；
elementToScroll=document.getElementById（sectionId）；
elementToScroll.scrollIntoView({
行为：“平滑”，
区块：“开始”
});
});
} }
函数makeActive（）{
对于（让节中的节）{
设attr=section.getAttribute（'id'）；
设a=document.querySelector（`[href=“${attr}”]`）；
let box=section.getBoundingClientRect（）；
如果（box.top=150）{
section.classList.add（'your-active-class'）；
a、 添加（“菜单链接激活”）；
}
否则{
section.classList.remove（'your-active-class'）；
a、 classList.remove（'menu\u link\u active'）；
}
} }
document.addEventListener（'scroll'，（e）=>{
makeActive（）；}）；

---

编辑：“粘性”的问题是因为触摸和胡佛状态，所以现在问题解决了

尝试使用touchstart或touch，不要像addEventListener那样单击（'click touchstart'，@AhmedSunny不起作用。当我将addEventListener类型从'click'更改为'click touchstart'时，链接在单击时不再起作用。不要更改它，添加它。你需要一个用于

click

和

touchstart

的eventlistener，因此将该事件处理程序转换为它自己的函数，然后分别调用该函数这两个事件都有可能发生。