如何禁用锚点元素的指针事件但保留其子元素的指针事件？

要实现「禁用锚点跳转但保留子元素指针事件」，核心是阻止锚点的默认跳转行为，同时确保子元素的事件正常触发。以下是两种可行方案：

方案1：JavaScript 阻止默认行为 #

给需要禁用的锚点添加专属类（比如 disable-link），通过事件监听阻止跳转：

CSS 代码 #

/* 锚点不接收指针事件 */
a.disable-link {
  pointer-events: none;
}
/* 子元素恢复指针事件 */
a.disable-link > * {
  pointer-events: auto;
}

JavaScript 代码 #

// 遍历所有需要禁用的锚点
document.querySelectorAll('a.disable-link').forEach(anchor => {
  anchor.addEventListener('click', (e) => {
    // 阻止锚点的默认跳转行为
    e.preventDefault();
  });
});

这种方式下，子元素的点击事件会正常触发（比如 figure 的绑定事件），锚点的跳转被完全阻止。

方案2：动态控制 href 属性 #

直接通过修改 DOM 属性控制锚点的跳转能力，是更直观的方式：

禁用跳转时 #

// 移除 href 属性，锚点不再具备跳转能力
document.querySelector('a.no-pointer-events').removeAttribute('href');

需要恢复跳转时 #

// 重新添加 href 属性
document.querySelector('a.no-pointer-events').setAttribute('href', '目标链接地址');

这种方式不需要额外设置 pointer-events，无 href 的锚点本身不会触发跳转，子元素的指针事件不受任何影响。

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