JavaScript缩略图图片画廊在Safari中无法正常工作

针对你遇到的Safari浏览器中点击缩略图无法替换大图、反而打开新标签页的问题，以下是几个可行的解决方案：

方案1：使用事件委托绑定点击事件 #

老版本jQuery（如1.8.3）在Safari中直接绑定元素事件可能存在时机或捕获问题，改用事件委托能确保事件被正确监听：

// 改用事件委托绑定点击事件
$(document).on('click', '.gallery-thumbs a', function(event) {
    event.preventDefault();
    event.stopPropagation(); // 额外阻止事件冒泡，避免触发其他库的事件
    $('#keyImage').attr('src', this.href);
    return false;
});

方案2：同时阻止默认行为与事件冒泡 #

Safari可能对单一的preventDefault()或return false处理不彻底，同时执行多种阻止操作能覆盖场景：

$('.gallery-thumbs a').click(function(event) {
    event.preventDefault(); // 阻止默认跳转
    event.stopImmediatePropagation(); // 阻止后续事件处理函数执行
    $('#keyImage').attr('src', this.href);
    return false; // 同时阻止默认和冒泡
});

方案3：排除FancyBox对缩略图链接的影响 #

你的站点使用了FancyBox，它可能对所有带rel="gallery"或popLink类的链接绑定了弹窗事件，缩略图的a标签可能被误触发。可以给缩略图的a标签添加专属类，然后修改FancyBox的初始化逻辑，排除这些链接：

1. 修改HTML中缩略图的a标签：

<div class="gallery-thumbs">
    <a class="thumb-link" href="Roller-Shades/images/Girare-Roller-Shade.jpg">
       <img src="Roller-Shades/images/Girare-Roller-Shade_t.jpg" alt="" /></a>
    <!-- 其他缩略图a标签同样添加thumb-link类 -->
</div>

2. 调整FancyBox的初始化选择器（假设原初始化代码类似）：

// 只对popLink类的链接初始化FancyBox，排除thumb-link类
$('a.popLink:not(.thumb-link)').fancybox({
    // 你的FancyBox配置参数
});

方案4：改用原生JavaScript绑定事件 #

如果jQuery的事件处理在Safari中存在兼容性问题，直接用原生JS绑定事件可能更可靠：

// 获取所有缩略图链接
var thumbLinks = document.querySelectorAll('.gallery-thumbs a');
for (var i = 0; i < thumbLinks.length; i++) {
    thumbLinks[i].onclick = function(e) {
        e.preventDefault();
        document.getElementById('keyImage').src = this.href;
        return false;
    };
}

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