<a>链接和：当我包含某个 JavaScript 文件时，hover 事件不起作用</a>

Question

我正在为我的网站制作导航栏。 为了开发它，我创建了一个新的 HTML 文件，这样我就可以在不更改主 index.html 文件的情况下使用代码。 在其自己的 HTML 文件中，所有链接和 hover 事件都在工作。 However, when I brought the header code into my working index.html file, the links do not work, and the:hover css events no longer work. 我将问题缩小到包含 Javascript 文件。 这个 javascript 文件控制蛇游戏的元素，并包含一个递归运行的 requestAnimationFrame 游戏循环。

如何阻止此 JS 文件阻止这些其他事件？

这是游戏循环...

function main(currentTime) {

    if (gameOver) {
        if (confirm("You lost. Press ok to restart.")) {
            window.location ="/"
        }
        return
    }

    window.requestAnimationFrame(main)
    const secondsSinceLastRender = (currentTime - lastRenderTime) / 1000;
    if (secondsSinceLastRender < 1 / SNAKE_SPEED) return
    
    // console.log("Render")
    lastRenderTime = currentTime
    
    update()
    draw()
}

window.requestAnimationFrame(main)

Answer 1

我解决了这个问题。 我有一个单独的 JS 文件生成一个大约 99vh 高度和 99vw 宽度的网格。 网格用于蛇元素。 由于 Z 索引，悬停事件被这个巨大的隐形元素阻止。 我将 header z-index 设置为 900，以防万一；），现在一切正常