CSS：隐藏的对象可以点击吗？答案

【问题标题】：CSS: Is a hidden object clickable?CSS：隐藏的对象可以点击吗？
【发布时间】：2011-08-05 07:09:39
【问题描述】：

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

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

【问题讨论】：

它已经完全从元素流中移除了，但我不确定它是否从 DOM 树中取出...
你对“显示：无”不太正确。带有“display: none”的对象仍然是 DOM 树的一部分（例如，你可以通过 jQuery 找到它），但它不是可视树的一部分。
如果你想让对象可以点击，你可以使用'opacity'来代替。

【解决方案1】：

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

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

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

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

&lt;div&gt;abc&lt;/div&gt;

【讨论】：

@BoltClock 我不确定它会朝哪个方向发展，但我觉得它行不通:)
你能给我参考一下吗？？
@dramasea 引用：浏览器无处不在
有谁知道是否所有的浏览器都符合这个？我记得在非常旧的 Firefox 版本中，visibility: hidden 元素仍然会触发点击事件，但也许我将其与影响布局的那些元素混淆了……
您仍然没有任何证据证明不可点击是官方标准。

【解决方案2】：

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

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

【讨论】：

这是正确答案。 @Alex 的标记答案是错误的/具有误导性。为什么有人需要这个，有人可能会问？我有一个 Ajax 表单中的部分视图，我想每隔 X 分钟通过部分视图刷新来异步更新它。我在部分视图中添加了一个隐藏的提交按钮，并设置了一个计时器以每 X 分钟单击一次按钮，我很高兴！我的解决方案将检查是否有任何数据已更改，然后将它们保存回服务器（考虑自动保存）。
感谢 MikeTeeVee
@MikeTeeVee 你不能设置一个间隔然后收集和发布数据吗？似乎很奇怪，您必须隐藏一个 ui 元素才能以编程方式单击它
@idkwhatsgoingon 我添加了 <button name="ActionVerb" value="Resume" data-AsyncPostback_RefreshInterval="@Model.PauseLimit" type="submit" hidden></button> 从这里我有一些 Javascript 来查找任何 "ActionVerb" 按钮（没有 "display:none;" 的属性样式），它会解析出刷新使用间隔，按钮将回发我想要处理的动词（在本例中为“恢复”，这将为我触发刷新）。这使我能够编写一次 JS，然后将这样的 Button 放在任何地方，并立即与 Timer 连接。

【解决方案3】：

没有。

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

【讨论】：

【解决方案4】：

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

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

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

 input.current.click();

【讨论】：

【解决方案5】：

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

【讨论】：