如何通过锚点链接触发第三方Overlay？寻求更简洁实现方案

你可以通过复用原有的特殊链接元素来简化方案，无需额外添加隐藏的<a>标签，同时精简逻辑代码：

优化后的DOM结构 #

直接给带blabla-data-link属性的特殊链接加上锚点href="#something"，保留它的Overlay触发能力：

<a class="blabla-link" href="#something" blabla-data-link="123abc">Click me for overlay!</a>

精简后的JS逻辑 #

// 只查询一次目标链接元素
const overlayLink = document.querySelector('.blabla-link');

// 处理点击：阻止锚点默认跳转，保留原Overlay触发逻辑
overlayLink.addEventListener('click', (e) => {
  e.preventDefault();
  // 元素本身带blabla-data-link，点击已能触发Overlay，无需额外操作
});

// 页面加载时检查锚点，自动触发Overlay
window.addEventListener('load', () => {
  if (window.location.hash === '#something') {
    overlayLink.click();
  }
});

// 可选：监听哈希变化，支持用户手动修改URL锚点时触发
window.addEventListener('hashchange', () => {
  if (window.location.hash === '#something') {
    overlayLink.click();
  }
});

优化点说明 #

1. 减少冗余DOM：去掉了额外的隐藏<a>标签，直接复用原有的触发元素，DOM结构更清爽
2. 逻辑更直接：无需跨元素模拟点击，直接操作原生触发Overlay的链接
3. 代码更易维护：元素查询只执行一次，事件绑定更精准，还额外支持了哈希变化的场景

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