CSS：隐藏的对象是否可点击？

Question

如果 HTML 元素样式的

visibility

属性设置为

hidden

，它还可以点击吗？

当

display

属性设置为

none

时，该元素甚至不是 DOM 树的一部分，因此这不是问题。但我想知道

hidden

元素是否仍然响应鼠标事件。

Answer 1

有了

display: none

，它is仍然是 DOM 的一部分。它只是没有在视口中渲染。

对于带有

visibility: hidden

的元素的点击，事件不会被触发。

jsFiddle.

$('div').click(function() {
    alert('Hello')
});

div {
    width: 100%;
    height: 100%;
    visibility: hidden; 
}

<div>abc</div>

Answer 2

隐藏 div 或不显示 div 只会使其无法被用户点击。 但实际上它仍然是 dom 中的一个元素，你可以像这样用另一个 java 脚本/jquery 单击它。

$('div').click(function() {
    alert('Hello')
});
$('div').click();

jsfiddle

Answer 3

没有。

如果可见性设置为隐藏，则无法单击超链接等元素（以及后面的链接）。同样，onclick 事件也不会被触发。

Answer 4

如果 HTML 元素的样式的visibility属性设置为隐藏，它还可以点击吗？

仅当其子级都没有覆盖可见性时。

---

CSS

visibility

 并不强制适用于所有儿童。假设您有一个使用 

visibility:hidden

 的对话框（我的用例）。如果该对话框中的任何内容使用 

visibility:visible

，它将“突破”父级并允许事件。

万无一失的方法是创建一个新的堆叠上下文并将其缩小到 0。使用

transform

 是一种简单的方法，而不必导致布局回流（例如：

max-height

）。

  visibility: hidden;
  transform: scale(0);

<div style="visibility:hidden">
  <input style="visibility:visible" value="Visible child">
</div>

<div style="visibility:hidden;transform:scale(0)">
  <input style="visibility:visible" value="Visible Child">
</div>

<div>
  <input value="Normal">
</div>

它仍然会占用与通常相同的空间，但单击事件不会触发，光标也不会改变。但这并没有说明键盘

Tab

...