为什么在我的JS图库中单击图片时会打开它们？

我有一个最简单的JS图像画廊，应该是在顶部显示一个大图像，在底部显示其他画廊图像的小缩略图。我悬停在底部的图像变成了大图像，这很好，但是当我点击它时，它会在新的url中打开图像本身(在同一个页面上)，即使我在JS中没有实现任何类似的东西。

下面是html：

<p><img id="largeImg" src="{{ url_for('static', filename='metal1.jpg') }}" alt="Image 1"></p>

<ul id="thumbs">
    <li>
        <a href="{{ url_for('static', filename='metal1.jpg') }}" title="Image 2"><img src="{{ url_for('static', filename='metal1.jpg') }}"></a>
    </li>
    <li>
        <a href="{{ url_for('static', filename='metal2.jpg') }}" title="Image 3"><img src="{{ url_for('static', filename='metal2.jpg') }}"></a>
    </li>
    <li>
        <a href="{{ url_for('static', filename='metal3.jpg') }}" title="Image 4"><img src="{{ url_for('static', filename='metal3.jpg') }}"></a>
    </li>
    <li>
        <a href="{{ url_for('static', filename='metal4.jpg') }}" title="Image 5"><img src="{{ url_for('static', filename='metal4.jpg') }}"></a>
    </li>
    <li>
        <a href="{{ url_for('static', filename='metal5.jpg') }}" title="Image 6"><img src="{{ url_for('static', filename='metal5.jpg') }}"></a>
    </li>
</ul>

这是JS：

thumbs.onmouseover = function(event) {
    let thumbnail = event.target.closest('a');

    if (!thumbnail) return;
    showThumbnail(thumbnail.href, thumbnail.title);
    event.preventDefault();
}

function showThumbnail(href, title) {
    largeImg.src = href;
    largeImg.alt = title;
}

转载请注明出处:http://www.sthongjia.com/article/20230526/2035043.html