a标签onclick事件不生效无法点击问题排查求助

问题根因 #

1. <a>标签缺失href属性，移动端对无href的<a>标签点击事件兼容性极差，大部分场景下不会触发绑定的click回调
2. onclick属性中写了return addSlide(-1)，但addSlide函数没有任何返回值，默认返回undefined，部分浏览器会直接阻断交互响应
3. 仅设置z-index未给<a>标签配置非static的position属性，z-index完全不生效，宽度100%的.card元素会遮挡住<a>的点击区域，实际点击时触发的是.card的点击事件而非<a>的
4. 初始化逻辑错误，addSlide是用于轮播切换的计数函数，初始加载直接调用会导致初始索引偏移

修复方案 #

• 修改<a>标签代码，补全href属性并删除多余的return：

<!-- 替换原来的两个a标签 -->
<a href="javascript:;" onclick="addSlide(-1);" id="prev">&#10094;</a>
<a href="javascript:;" onclick="addSlide(1);" id="next">&#10095;</a>

• 补充<a>标签的CSS配置，确保层级生效并扩大移动端点击热区：

#prev, #next {
  position: relative;
  z-index: 999; /* 可替换为你之前设置的层级值 */
  padding: 12px;
  cursor: pointer;
}

• 修正JS初始化逻辑，避免初始索引偏移：

var slideIndex = 1;
// 原addSlide(slideIndex)替换为下面的代码
showSlides(slideIndex);

function addSlide(n) {
  showSlides(slideIndex += n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("card");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "block";
}

另外不要将JS文件移到head区块，放在body底部是正确写法，移到head后失效是因为DOM还未加载完成，JS无法获取到对应的DOM元素，如果一定要放在head可将代码包裹在DOMContentLoaded事件监听回调中。

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