What is the method that css hides elements to trigger click events?

The main content of this article is to explain "what is the method of css hidden elements to trigger click events", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "what is the method of css hidden elements to trigger click events"!

One of several ways for css to hide elements that can trigger click events is

Is the method by which opacity is set to 0.

How css hides elements:

1 、 display:none

.box {display: none;}

The simplest and roughest way is to set the element's display attribute to none.

The element set to display:none; will no longer occupy the page space, and the space it occupies will be occupied by other elements, which will cause browser rearrangement and reunion.

2 、 visibility: hidden

.box {visibility: hidden;}

Although this can hide the element, the element still takes up page space, so it will only cause the browser to rearrange rather than rearrange it.

If you want the element to be hidden without causing changes in the layout of the page, visibility:hidden; is recommended.

3. Opacity:0; (filter: alpha (opacity=0); both should be written for compatibility)

Set the element transparency opacity attribute to 0, or you can hide the page element.

.box {opacity:0;}

In the same way as visibility:hidden;, it also takes up page space.

Event binding differences:

The element of display:none; disappears directly from the page, so the event bound on that element does not take effect.

Visibility: elements of hidden; do not trigger bound events.

Elements of opacity:0; trigger bound events, such as clicking to trigger the click function.

At this point, I believe you have a deeper understanding of the "css hidden elements trigger click events" method, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!