CSS: Is a hidden object clickable?

Question

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

When the display property

Answer 1

You can use useRef in react, add ref to your input and use it to call onClick like below

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

and then call whatever you want like click method

 input.current.click();

Answer 2

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>

Answer 3

No.

An element such as a hyperlink can't be clicked (and the link followed) if the visibility is set to hidden. Similarly, onclick events won't be fired.

Answer 4

Making div hidden or display none just makes it un clickable to user. But in real its still an element in dom and you can click it with another java script/jquery like this.

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

jsfiddle