设置visibility:hidden的DOM元素是否会监听click、hover等JS事件？

答案很明确：设置了visibility:hidden的DOM元素，不会触发click、hover这类鼠标相关的JS事件。

原因解析 #

当元素被设为visibility:hidden时，它虽然还会占据文档流里的空间（布局上不会“消失”），但视觉上完全不可见。浏览器的事件处理机制会把这类不可见元素排除在鼠标交互的目标之外——简单来说，你的鼠标“感知”不到它的存在，自然不会触发对应的点击、悬停等事件。

对比其他常见隐藏方式 #

为了帮你更清晰区分不同隐藏方案的差异，这里补充两种常用场景：

• display:none：元素不仅视觉消失，还会直接从文档流中移除，同样不会响应任何鼠标事件，页面布局也会随之重新调整。
• opacity:0：元素视觉上完全透明，但依然存在于文档流中，并且会正常响应鼠标事件——因为它只是“看不见”，浏览器仍将其视为可交互的目标。

你可以用这段简单代码验证差异：

<div style="visibility:hidden; width:100px; height:100px;" onclick="alert('visibility:hidden触发点击')">点击我试试</div>
<div style="opacity:0; width:100px; height:100px;" onclick="alert('opacity:0触发点击')">点击我试试</div>

点击第一个div不会有任何反应，点击第二个div则会弹出提示框。

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