JS滑块prev函数onClick仅首次生效，控制台正常求助

问题现象 #

• next()函数在点击事件中正常工作
• prev()仅在页面加载后能生效一次，点击next()后再点击prev()完全失效
• 直接在控制台调用两个函数均能正常运行，代码无异步逻辑

相关代码 #

JS代码

const slider = document.querySelector('.slider');
let newTranslate = 0

const next = () => {
    newTranslate -= 100
    slider.style.transform = `translateX(${newTranslate}%)`
};

const prev = () => {
    newTranslate += 100
    slider.style.transform = `translateX(${newTranslate}%)`
};

HTML代码

<section class="quote">
    <a onclick="prev()">
        <i class="arrow arrow-left"></i>
    </a>
    <div class="slider-container slider-1">
        <div class="slider">
            <div class="slide slide-1">
                <div class="quote_container">
                    ...
                </div>
            </div>
        </div>
    </div>
    <a onclick="next()">
        <i class="arrow arrow-right"></i>
    </a>
</section>

问题根源 #

问题出在<a>标签的默认导航行为：即使没有设置href属性，部分浏览器仍会在点击<a>元素时触发页面导航（比如刷新当前页面），导致全局变量newTranslate被重新初始化。而控制台直接调用函数不会触发浏览器的默认导航行为，因此能正常运行；next()暂时正常可能是浏览器行为差异导致的偶然现象。

解决方案 #

以下三种方案任选其一即可：

方案1：阻止a标签默认行为

修改HTML中的按钮，在onclick中添加事件对象并阻止默认行为：

<a onclick="prev(event); return false;">
    <i class="arrow arrow-left"></i>
</a>
<a onclick="next(event); return false;">
    <i class="arrow arrow-right"></i>
</a>

同时更新JS函数，添加事件默认行为阻止：

const next = (event) => {
    event.preventDefault();
    newTranslate -= 100
    slider.style.transform = `translateX(${newTranslate}%)`
};

const prev = (event) => {
    event.preventDefault();
    newTranslate += 100
    slider.style.transform = `translateX(${newTranslate}%)`
};

方案2：替换a标签为button标签

按钮功能更适合用<button>标签，避免导航行为干扰：

<button onclick="prev()">
    <i class="arrow arrow-left"></i>
</button>
<button onclick="next()">
    <i class="arrow arrow-right"></i>
</button>

可通过CSS去掉按钮默认样式，保持原有外观：

button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

方案3：使用事件监听器绑定事件

去掉内联onclick，通过JS添加事件监听器，更符合现代JS规范：

<section class="quote">
    <a class="slider-btn prev-btn">
        <i class="arrow arrow-left"></i>
    </a>
    <div class="slider-container slider-1">
        <div class="slider">
            <div class="slide slide-1">
                <div class="quote_container">
                    ...
                </div>
            </div>
        </div>
    </div>
    <a class="slider-btn next-btn">
        <i class="arrow arrow-right"></i>
    </a>
</section>

const slider = document.querySelector('.slider');
let newTranslate = 0;
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');

const next = () => {
    newTranslate -= 100
    slider.style.transform = `translateX(${newTranslate}%)`
};

const prev = () => {
    newTranslate += 100
    slider.style.transform = `translateX(${newTranslate}%)`
};

prevBtn.addEventListener('click', (e) => {
    e.preventDefault();
    prev();
});

nextBtn.addEventListener('click', (e) => {
    e.preventDefault();
    next();
});

内容的提问来源于stack exchange，提问作者Raphaël Chemouni