css - CSS：隐藏的对象可以点击吗？

Question

如果visibility一个 HTML 元素的 style 属性设置为hidden，它仍然可以点击吗？

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

score 87 · Accepted Answer

它display: none仍然是DOM 的一部分。它只是不在视口中呈现。

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

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

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

<div>abc</div>

score 11 · Accepted Answer

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

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

score 6 · Accepted Answer

不。

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

score 0 · Accepted Answer

visibiality: hidden带有is notvisible但仍占用页面空间的 HTML 元素。您不能使用鼠标触发事件（单击、悬停...），但您可以使用 javascript 通过 DOM 访问它并触发事件。

score -1 · Accepted Answer

您可以在反应中使用 useRef，将 ref 添加到您的输入并使用它来调用 onClick，如下所示

  import React, { useRef } from "react";
  const input = useRef();
  <input ref={input} type="file" />

然后调用任何你想要的点击方法

 input.current.click();

5 回答 5