Safari 会默认将 点击行为解析为新窗口跳转，即使调用了 event.preventDefault()，若链接 href 为非空有效 URL，仍可能触发导航；改用 data-src 存储图片路径可彻底规避此兼容性问题。
safari 会默认将 `` 点击行为解析为新窗口跳转，即使调用了 `event.preventdefault()`，若链接 `href` 为非空有效 url，仍可能触发导航；改用 `data-src` 存储图片路径可彻底规避此兼容性问题。
在构建响应式图片画廊时，一个常见需求是：点击缩略图，动态更新主图（src 属性。该逻辑在 Chrome、Firefox、Edge 和 Opera 中运行良好，却在 Safari（尤其是较旧版本及部分 macOS/iOS WebKit 内核环境）中失效——用户点击缩略图后，浏览器直接跳转至新标签页，而非更新主图。
根本原因在于：Safari 对 event.preventDefault() 的执行时机与 DOM 解析行为更为严格。当 @#@#@#@#@#@#@#@#@#@1 被点击时，WebKit 可能在 JavaScript 事件监听器完全生效前，已启动默认导航流程（尤其在 jQuery 1.8.3 这类较老版本中，事件委托与冒泡处理存在细微差异）。此时仅靠 preventDefault() 并不能 100% 阻断跳转，尤其当 href 指向可直接渲染的资源（如 .jpg, .webp）时，浏览器倾向于将其视为“可导航目标”。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
✅ 正确解法：语义化分离行为与数据
将图片地址从 href（语义上表示“超链接目标”）迁移至自定义 data-src 属性（语义上明确为“供 JS 使用的数据”），使 @#@#@#@#@#@#@#@#@#@2 包裹结构（如示例中的 .popLink）不会意外捕获并触发事件冒泡——建议为缩略图区域添加 e.stopPropagation()，或确保事件委托层级清晰；
通过这一微小但关键的语义重构，即可一劳永逸解决 Safari 缩略图画廊兼容性问题，同时让代码更健壮、更符合现代 Web 开发最佳实践。
<div class="gallery-thumbs">
<a href="#">
@@##@@
</a>
<a href="#">
@@##@@
</a>
<!-- 更多缩略图https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c -->
</div>
$('.gallery-thumbs a').on('click', function(e) {
e.preventDefault(); // 此时 href="#" 安全，preventDefault 必然生效
var newSrc = $(this).data('src'); // 或原生 this.dataset.src
$('#keyImage').attr('src', newSrc);
});
