CSS：隐藏对象可点击？(CSS: Is a hidden object clickable?)

如果HTML元素的风格的visibility属性设置为hidden ，是否仍然可以点击？

当display属性设置为none ，该元素不是DOM树的一部分，因此这不是问题。 但我想知道一个hidden元素是否仍然响应鼠标事件。

If the visibility property of the style of an HTML element is set to hidden, is it still clickable?

When the display property is set to none, the element is not even part of the DOM tree, so that is not a problem. But I was wondering if a hidden element still responds to mouse events.

最满意答案

使用display: none它仍然是DOM的一部分。 它只是没有在视口中渲染。

对于具有visibility: hidden元素的点击visibility: hidden ，事件不会被触发。

jsFiddle 。

$('div').click(function() {
    alert('Hello')
}); 
  
div {
    width: 100%;
    height: 100%;
    visibility: hidden; 
} 
  
<div>abc</div> 
  
 
With display: none it is still part of the DOM. It just isn't rendered in the viewport.
 
As for clicks on elements with visibility: hidden, the events are not fired.
 
jsFiddle.
 
 
 
  
  
$('div').click(function() {
    alert('Hello')
}); 
  
div {
    width: 100%;
    height: 100%;
    visibility: hidden; 
} 
  
<div>abc</div>