为多个figure元素添加EventListener并调用子元素a的href属性

嘿，我来帮你搞定这个跨设备交互的需求！针对你提到的重复HTML结构，我们可以结合CSS媒体查询和JavaScript实现完美的交互体验，下面是具体方案：

第一步：用CSS控制不同设备下a标签的显示 #

首先通过媒体查询区分触屏和非触屏设备，分别设置a标签的显示逻辑：

/* 非触屏设备（如桌面端带鼠标）：hover时显示链接按钮 */
@media (hover: hover) and (pointer: fine) {
  .proj-photo a {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    /* 这里可以添加你原本的按钮样式 */
  }
  figure:hover .proj-photo a {
    opacity: 1;
    visibility: visible;
  }
}

/* 触屏设备：默认隐藏a按钮，让整个figure区域可点击 */
@media (hover: none) and (pointer: coarse) {
  .proj-photo a {
    display: none;
  }
}

用hover和pointer媒体特性判断设备类型，比单纯检测触摸事件更精准，能覆盖同时支持触摸和鼠标的设备（比如二合一平板）。

第二步：JavaScript给figure添加点击跳转逻辑 #

接下来给所有figure元素绑定点击事件，点击时触发内部a标签的跳转行为：

// 获取页面中所有的figure元素
const projectFigures = document.querySelectorAll('figure');

projectFigures.forEach(figure => {
  // 绑定点击事件
  figure.addEventListener('click', function() {
    // 找到当前figure内的a标签
    const targetLink = this.querySelector('.proj-photo a');
    
    if (targetLink && targetLink.href) {
      // 调用原生click方法，保留a标签的所有原生行为（比如target="_blank"）
      targetLink.click();
    }
  });

  // 可选：阻止a标签自身点击时的事件冒泡，避免重复触发
  const innerLink = figure.querySelector('.proj-photo a');
  if (innerLink) {
    innerLink.addEventListener('click', function(e) {
      e.stopPropagation();
    });
  }
});

关键说明： #

• 使用targetLink.click()而非直接修改window.location.href，是为了保留a标签的原生属性（比如target="_blank"打开新标签、rel="noopener"安全属性等）。
• 添加事件冒泡阻止，是为了避免在非触屏设备上，用户点击a按钮时同时触发figure的点击事件，造成不必要的重复跳转。

这样设置后，非触屏设备保持hover显示按钮的交互，触屏设备点击整个figure就能跳转，完全符合你的需求啦！

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