如何禁用锚点标签（a标签）内部分元素的页面跳转功能？

这个问题的核心原因是DOM事件冒泡机制：当你点击轮播切换按钮时，点击事件会沿着DOM树向上传递，最终触发父级<a>标签的点击事件，导致页面跳转。我们只需要在按钮的点击事件中阻止这种冒泡行为，就能既保留按钮的切换功能，又避免触发a标签的跳转。

下面是几种可行的实现方案：

原生JavaScript方案（推荐） #

给所有切换按钮添加点击事件监听器，在回调函数中调用event.stopPropagation()来阻止事件向上冒泡：

// 获取所有轮播切换按钮
const carouselButtons = document.querySelectorAll('.dotButton button');

// 为每个按钮绑定点击事件
carouselButtons.forEach(button => {
  button.addEventListener('click', function(event) {
    // 阻止事件向上冒泡，避免触发父级a标签的跳转
    event.stopPropagation();
    
    // 在这里执行你的图片切换逻辑，比如：
    // 假设你有一个切换图片的函数
    switchCarouselImage(this);
  });
});

内联事件处理（快速测试用） #

如果不想写单独的JS文件，也可以直接在按钮的onclick属性中阻止冒泡：

<div class="dotButton"> 
  <button onclick="event.stopPropagation(); switchCarouselImage(this);"></button> 
  <button onclick="event.stopPropagation(); switchCarouselImage(this);"></button> 
  <button onclick="event.stopPropagation(); switchCarouselImage(this);"></button> 
</div>

注意：你的原始代码中有个小语法错误：<div class="dotButton> 缺少了闭合引号，应该修正为 <div class="dotButton">，避免出现样式或选择器失效的问题。

这样处理后：

• 点击切换按钮时，只会执行你的图片切换逻辑，事件不会传递到父级<a>标签，因此不会触发跳转；
• 点击卡片的其他区域（标题、描述、轮播图本身）时，事件依然会正常冒泡到<a>标签，触发预期的跳转行为。

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