HTML Button点击无响应：页面头部按钮点击无任何触发效果求助

核心排查方向 #

• 层级遮挡问题：页面内class="area"的背景容器z-index值高于context容器，覆盖在按钮上方拦截了点击事件。你可以直接给.context添加position: relative; z-index: 10;，给.area添加position: relative; z-index: 1;，保证按钮所在容器层级高于背景层即可优先接收点击事件。
• CSS交互属性问题：检查.headerButton或者父级.context是否设置了pointer-events: none;，该属性会直接禁用元素所有鼠标交互，若存在该属性修改为pointer-events: auto;即可。
• JS冲突问题：代码中重复引入了两次resources/js/app.js，如果该JS文件内给按钮或父元素绑定了阻止默认事件/冒泡的逻辑（比如e.preventDefault()、e.stopPropagation()），也会导致onclick不触发，先删除重复引入的第二个JS文件测试，再排查app.js内的事件绑定逻辑。
• 路径验证：如果点击Works按钮后控制台能打印it worked但没有跳转，说明是相对路径问题，将路径修改为绝对路径/Clicked/Works即可。

修复代码示例 #

CSS修复（添加到stylesheet.css中） #

.context {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}
.area {
  position: relative;
  z-index: 1;
}
.headerButton {
  pointer-events: auto;
  cursor: pointer;
}

HTML结构优化 #

你的原代码中<header>标签放在了</head>和<body>之间，属于非法HTML结构，可能导致样式或事件异常，调整后结构如下：

<!DOCTYPE html>
<html>
<head>
    <script src="https://kit.fontawesome.com/6feb1dab38.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="resources/css/stylesheet.css">
    <title>Home</title>
</head>
<body>
    <header>
    </header>
    <div class="context">
        <button class="headerButton" type="button">About Me</button>
        <button class="headerButton" type="button">Links</button>
        <button class="headerButton" type="button" onclick="window.location.href='/Clicked/Works'; console.log('it worked')">Works</button>
        <br>
        <script src="resources/js/app.js"></script>
    </div>
    <div class="area" >
        <ul class="circles">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
        </ul>
    </div>
</body>
</html>

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