如何使用Vanilla JS禁用指定类.my-class下的所有链接？

要实现禁用.my-class父容器内所有链接的点击功能，以下是几种实用的Vanilla JS方案，你可以根据需求选择：

方案1：阻止点击的默认跳转行为（保留href属性） #

这种方法不会修改链接的href属性，但点击时会阻止默认的跳转动作，适合需要保留原href但不让用户跳转的场景：

// 选中目标容器下的所有a标签
const targetLinks = document.querySelectorAll('.my-class a');

// 遍历每个链接，绑定点击事件
targetLinks.forEach(link => {
  link.addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认跳转行为
  });
});

方案2：修改href为无效值 #

直接将链接的href设置为无效的JavaScript伪协议，从根源上避免跳转，同时也可以配合阻止默认事件确保彻底禁用：

const targetLinks = document.querySelectorAll('.my-class a');

targetLinks.forEach(link => {
  link.href = 'javascript:void(0)';
  // 额外添加阻止默认事件，避免特殊情况
  link.addEventListener('click', e => e.preventDefault());
});

方案3：添加禁用状态（带视觉反馈） #

如果需要让链接看起来明显是禁用状态，可以给a标签添加disabled属性，再配合CSS样式实现视觉禁用效果，同时阻止点击：

JavaScript代码： #

const targetLinks = document.querySelectorAll('.my-class a');

targetLinks.forEach(link => {
  link.setAttribute('disabled', 'true');
  link.addEventListener('click', e => e.preventDefault());
});

配套CSS（可选）： #

.my-class a[disabled] {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

以上方案都可以实现你需要的“链接无法被点击”的效果，根据实际场景选择即可。

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