How to Disable Clicking on a div with CSS?

To disable clicking on a div with CSS, you can use the pointer-events property. The pointer-events property allows you to control various mouse events on HTML elements.

So, if you want to disable the click event on a div element, you have to set its pointer-events property to none. That’s it.

Let’s say we have a div element in our HTML file with a class disabled:

<div class="disabled">Click events are disabled.</div>

Now, to disable click events on this div, we will simply set the pointer-events property to none in our CSS file:

/*Disable click events*/
.disabled{
    pointer-events: none;
}

After applying the above styles to the div, if you add any JavaScript event listener function and try clicking on it, this event listener will not get executed.

This is simply because all mouse events have been disabled for the div element.

Thanks for reading.