Safari 对 <a> 标签的 href 属性行为更严格，直接使用 href 触发 event.preventDefault() 有时仍会触发默认跳转；改用 data-src 自定义属性传递图片路径可彻底规避此问题，并提升代码语义性与兼容性。
在构建响应式图片画廊时，缩略图点击切换主图是常见交互。然而，当使用 <a href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c"> 包裹缩略图并依赖 event.preventDefault() 阻止跳转时，Safari（尤其是旧版 WebKit 内核）可能因解析优先级或事件冒泡时机问题，未能完全抑制默认导航行为，导致图片在新标签页打开——这正是你遇到的核心兼容性问题。
根本原因在于：Safari 对带有非空 href 值的 <a> 元素具有更强的“可激活性”（activability），即使调用了 preventDefault()，若事件处理存在微小延迟、DOM 更新未及时同步，或 jQuery 1.8.3 在 Safari 中对事件委托的支持存在边界情况，都可能导致默认行为“逃逸”。
✅ *推荐解决方案：弃用 href 传值，改用语义化 `data-` 属性**
将缩略图链接的图片地址从 href 迁移至自定义 data-src 属性，既保持 HTML 合法性，又完全解耦“视觉链接”与“数据载体”职责：
立即学习“Java免费学习笔记（深入）”；
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
<div class="gallery-thumbs">
<a href="#" >
<img src="Roller-Shades/images/Girare-Roller-Shade_t.jpg" alt="缩略图1" />
</a>
<a href="#" >
<img src="Roller-Shades/images/Girare-Roller-Shade_t1.jpg" alt="缩略图2" />
</a>
<!-- 更多缩略图https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c -->
</div>对应 JavaScript 改为：
$('.gallery-thumbs a').on('click', function(e) {
e.preventDefault(); // 依然保留，确保安全
const newSrc = this.dataset.src; // 使用标准 DOM dataset API
$('#keyImage').attr('src', newSrc);
});? 为什么 data-src 能解决 Safari 问题？
- href="#" 是一个无副作用的占位符，Safari 不会将其视为有效导航目标，从根本上消除了跳转触发条件；
- dataset.src 是原生、轻量、跨浏览器一致的属性读取方式，避免了 jQuery .attr('href') 在不同内核下对属性解析的细微差异；
- 符合 HTML5 自定义数据属性规范，语义清晰，便于维护与扩展（如后续支持懒加载、WebP 回退等）。
⚠️ 额外建议与注意事项：
- 为提升可访问性，建议为缩略图 <a> 添加 role="button" 和 aria-label（如 aria-label="查看 Girare Roller Shade 大图"）；
- 若需支持键盘操作（Enter/Space），请补充 keydown 事件监听；
- 考虑添加图片加载状态（如 loading spinner）和错误兜底（onerror 替换为占位图）；
- jQuery 1.8.3 已非常老旧（发布于 2012 年），强烈建议升级至 3.x 或迁移到原生 JS（addEventListener + querySelectorAll），以获得更好的现代浏览器兼容性与性能。
通过这一重构，你的画廊将在 Safari、Chrome、Firefox 等所有主流浏览器中行为完全一致——点击缩略图，仅更新主图 src，绝不意外跳转。
