window.alert确定按钮触发其他按钮click事件，求JS简易修复方案

问题原因 #

你的代码存在一个新手常见错误：绑定事件时直接执行了函数（带括号），而非传递函数引用（不带括号）。这会导致页面加载阶段就立刻运行show1()，加上alert弹窗关闭后浏览器的焦点行为，最终表现为alert的确定按钮“触发”了按钮点击事件。

修复后的代码 #

JavaScript

function loaded() {
    window.alert("Page is loaded");
}

// 绑定load事件时传递函数引用（不带括号）
window.addEventListener("load", loaded);

function show1() {
    document.querySelector("#img1").style.display = "flex";
}

// 绑定click事件时同样传递函数引用
document.getElementById("button1").addEventListener("click", show1);

CSS

@charset "utf-8";

#img1, #img2, #img3 {
    display: none;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="style.css">
    <!-- 注：修正了原代码中css文件名的拼写错误 stlyle.css → style.css -->
</head>
<body>
    <p id="test"></p>
    <img id="img1" src="thestrip1.gif" />

    <button id="button1">Click Me!</button>
    
    <img id="img2" src="thestrip2.gif" />
    <img id="img3" src="thestrip3.gif" />
</body>
</html>

关键修复点 #

1. 事件绑定逻辑修正：addEventListener的第二个参数需要是函数本身（不带括号），带括号会让函数在绑定阶段直接运行，而非等到事件触发时执行。
2. Alert触发时机调整：把window.alert移到loaded函数内部，确保它只在页面完全加载后才弹出。
3. 代码简化与错误修正：合并CSS中重复的样式规则，同时修复了HTML里的CSS文件名拼写错误。

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