点击图片无法触发onclick收集image ID，求助排查代码故障

故障原因 #

你的代码核心问题是全局变量与Object.defineProperty的循环引用：

• 先声明了全局变量var lastClickedImageId，之后又通过Object.defineProperty(window, 'lastClickedImageId')重新定义该属性
• 当setter函数里执行lastClickedImageId = value时，会再次触发setter，形成无限循环，浏览器被迫终止函数执行，导致点击事件完全无响应

修复后的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Collect Image IDs on Click</title>
    <script>
        // 存储最后点击的图片ID
        var lastClickedImageId = "";

        // 点击图片时收集ID的函数
        function collectImageId(imageId) {
            lastClickedImageId = imageId;
            console.log("Last clicked image ID:", lastClickedImageId);
            updateLastClickedIdDisplay(); // 点击后直接更新页面显示
        }

        // 更新页面上的ID显示
        function updateLastClickedIdDisplay() {
            document.getElementById('lastClickedIdDisplay').textContent = lastClickedImageId;
        }

        // 页面加载时初始化显示
        updateLastClickedIdDisplay();
    </script>
</head>
<body>

<img id="image1" src="image1.jpg" alt="Image 1" onclick="collectImageId(this.id)">
<img id="image2" src="image2.jpg" alt="Image 2" onclick="collectImageId(this.id)">
<img id="image3" src="image3.jpg" alt="Image 3" onclick="collectImageId(this.id)">

<p>Last clicked image ID: <span id="lastClickedIdDisplay"></span></p>

</body>
</html>

修改说明 #

1. 删除了引发循环的Object.defineProperty代码块，简化逻辑
2. 在collectImageId函数内直接调用updateLastClickedIdDisplay，点击后立即更新页面显示
3. 初始化时调用一次updateLastClickedIdDisplay，确保页面加载后显示初始空值

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