点击子元素时父div意外关闭，如何阻止该问题？

问题背景 #

我有一个包含多个子元素的父div（id为form），需求是点击父div外部区域时关闭它，点击内部任何区域都不关闭。但目前点击子元素时父div会意外关闭，尝试用window点击事件判断目标元素，但问题仍存在。

原代码的核心问题 #

1. 条件判断错误：if (e.target = button)使用了赋值运算符=，而非严格比较运算符===，导致逻辑完全错误。
2. 重复绑定事件：每次点击按钮都会给window新增一个点击事件，后续点击会触发多次关闭逻辑。
3. 目标判断不全面：仅判断e.target != form，但点击form的子元素（如h1、input、内部div）时，e.target是子元素而非form本身，因此会误触发关闭。

修复后的代码 #

JavaScript代码

let button = document.getElementById('btn');
let form = document.getElementById('form');

// 初始化隐藏表单
form.style.display = 'none';

// 只绑定一次全局点击事件
window.addEventListener('click', function(e) {
    // 点击按钮时显示表单
    if (e.target === button) {
        form.style.display = 'block';
        form.style.backgroundColor = 'black';
        form.style.color = '#fff';
    } else {
        // 判断点击区域是否在表单内部（包括表单本身）
        const isInsideForm = form.contains(e.target);
        // 点击外部则关闭表单
        if (!isInsideForm) {
            form.style.display = 'none';
        }
    }
});

HTML代码（无需修改）

<button id="btn">Add</button>

<div id="form">
    <h1>Hello</h1>
    <div id="innerbox">
        <div id="prompts"></div>
        <div id="user_inputs">
            <input type="text" id="BookName" placeholder="Name">
            <input type="text" id="Author" placeholder="Author">
            <input type="text" id="Pages" placeholder="Pages">
        </div>
    </div>
    <div id="bottom_portion">
        <button id="submit">Submit</button>
    </div>
</div>

<script src="new.js"></script>

关键修复点说明 #

• 使用form.contains(e.target)：该方法可以判断点击的元素是否是form的后代元素（包括form自身），完美解决点击子元素误关闭的问题。
• 单次事件绑定：避免重复给window添加点击事件，防止逻辑多次触发。
• 修正比较运算符：用===进行严格相等判断，确保条件逻辑正确。
• 初始化隐藏表单：页面加载时默认隐藏form，符合交互逻辑。

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