你遇到的问题是事件冒泡导致的：当点击按钮时，按钮的点击事件会先触发显示p元素，紧接着这个点击事件会向上冒泡到document——而你刚好在按钮点击事件里给document绑定了隐藏p的事件，结果就是p刚显示就立刻被隐藏，看起来功能完全失效。另外每次点击按钮都会重复给document绑定新的点击事件，后续操作还会出现多次触发隐藏的冗余问题。

我们可以通过阻止按钮事件冒泡+提前绑定document点击事件并做目标判断来解决，既能避免重复绑定事件，又能精准控制显示隐藏逻辑。

完整代码示例 #

HTML #

<button id="btn">click me</button>
<p id="p">text here</p>

JavaScript #

const btn = document.getElementById('btn');
const p = document.getElementById('p');

// 初始化隐藏p元素
p.style.display = "none";

// 给document绑定一次点击事件，处理外部点击隐藏逻辑
document.addEventListener('click', function(e) {
    // 只有点击目标不是按钮和p元素本身时，才隐藏p
    if (e.target !== btn && e.target !== p) {
        p.style.display = "none";
    }
});

// 按钮点击事件：显示p并阻止冒泡
btn.addEventListener('click', function(e) {
    // 阻止事件向上冒泡到document，避免触发上面的隐藏逻辑
    e.stopPropagation();
    p.style.display = "block";
});

逻辑说明 #

1. 提前绑定document事件：只绑定一次，彻底避免重复绑定导致的多次触发问题。
2. 目标判断：在document的点击事件里，判断点击的元素是不是按钮或者p元素本身，如果是就不执行隐藏操作，这样点击p元素时它不会意外消失。
3. 阻止按钮事件冒泡：点击按钮时，阻止事件向上传递到document，确保按钮的点击事件只会触发显示p，不会立刻触发document的隐藏逻辑。

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