如何为HTML锚点标签设置无交互属性？Safari兼容问题求助

针对你遇到的Chrome生效但Safari不生效的情况，可尝试以下几种解决方案：

方案1：结合HTML属性优化 #

给目标<a>标签添加tabindex="-1"属性，避免Safari通过键盘聚焦触发意外交互，同时保留现有CSS：

<a href="www.google.com" tabindex="-1" class="non-interactive">www.google.com</a>

确保pointer-events: none !important没有被更高优先级的样式覆盖。

方案2：替换href属性值 #

将<a>标签的href改为javascript:void(0)，彻底阻断默认跳转行为，配合现有CSS禁用交互：

<a href="javascript:void(0)" class="non-interactive">www.google.com</a>

方案3：添加JavaScript事件拦截 #

如果CSS和HTML调整仍无效，直接通过JS强制阻止点击事件的默认行为：

document.querySelectorAll('.non-interactive').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
  });
});

这种方式不受浏览器兼容性限制，能彻底阻断所有点击触发的交互。

排查要点 #

• 检查父元素是否设置了pointer-events: auto，这会覆盖子元素的pointer-events: none
• 确认Safari版本，部分旧版对pointer-events的支持存在局限，建议升级到较新版本

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