Почему изображения открываются, когда я нажимаю на них в своей галерее JS?

Question

У меня есть простейшая 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;
}

Answer 1

Вот рабочий пример:

var thumbs = document.querySelector("ul#thumbs");
thumbs.onmouseover = function(event) {
    let thumbnail = event.target.closest('li');
    if (!thumbnail) return;
    showThumbnail(thumbnail.getAttribute('data-link'), thumbnail.title);
    event.preventDefault();
}

function showThumbnail(href, title) {
    console.log('href: ', href, ' title: ', title);
    largeImg.src = href;
    largeImg.alt = title;
}

ul#thumbs {
    display: flex;
    align-items: center;
    list-style-type: none;  
    margin: 0;
    padding: 0;
}

ul#thumbs li {
    margin: 5px;
    padding: 10px;
}

<p>
    <img id="largeImg" src="" alt="Image 1">
</p>

<ul id="thumbs">
    <li data-link="https://dummyimage.com/4:3x1080" title="Image 2">
        <img src="https://dummyimage.com/300">
    </li>
    <li data-link="https://dummyimage.com/16:9x1080" title="Image 3">
        <img src="https://dummyimage.com/300">
    </li>
    <li data-link="https://dummyimage.com/2:6x1080" title="Image 4">
        <img src="https://dummyimage.com/300">
    </li>
</ul>