How to check if an element is hidden or not

The first: use css properties

var display =$('#id').css('display');
if(display == 'none'){
   alert( "I'm hiding events that happened" );
}

Second: Use jQuery's built-in selector

Suppose the page layout is as follows:

<div id="test">
    <p>I use it for testing</p>
</div>

Then, we can use the following statement to determine whether the tag with id "test" is hidden:

// The premise is that the jQuery library has been imported 
if ($("#test").is(":hidden" )){
     // If it is hidden, the event handler is written here 
} else {
     // No hidden, event handler 
}

The retrieved element can be assigned to a variable:

for example:

// The premise is that the jQuery library has been imported 
var $node=$("#test" );
 if ($node.is(":hidden" )){
     // If it is hidden, the event handler is written in here 
} else {
     // no hidden, event handler 
}