HTML轮播图点击指示器后left属性修改失效，求排查思路

核心原因 #

你用<a>标签作为指示器，这类链接元素点击时会触发默认页面跳转行为——哪怕href是空值，浏览器也会刷新当前页面。页面刷新后所有DOM元素的样式都会重置为初始状态，所以img-list的left属性会回到0，表现为图片切换后立刻复位。

解决方法 #

方法1：阻止a标签的默认跳转行为

在点击事件处理函数中添加阻止默认行为的代码，有两种方式：

allA[i].onclick = function (event) {
    var value = this.index * (-370) + "px";
    img_list.style.left = value;
    // 方式1：调用preventDefault()
    event.preventDefault();
    // 方式2：直接return false（也能同时阻止默认行为和事件冒泡）
    // return false;
};

方法2：替换为非链接元素

把指示器的<a>标签换成<span>这类无默认交互的元素，同时调整CSS选择器适配新元素：

• HTML部分修改：

<div class="pointer">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

• CSS部分修改：

.pointer span{
    float: left; 
    width: 15px;
    height: 15px;
    background-color: red;
    opacity: 0.5;
    cursor: pointer; /* 加上鼠标指针样式，提升交互体验 */
}
.pointer span:hover{
    background-color: grey;
}
.pointer span:not(:first-child){
    margin-left: 10px;
}

验证效果 #

修改后点击指示器，页面不会刷新，img-list的left属性会保持设置后的值，图片切换状态就能正常维持了。

内容的提问来源于stack exchange，提问作者yifeng pan