How to Disable Click Event using CSS?

In HTML, most of the elements are not inherently clickable. Which means that they do not have a default click event attached that is triggered when the user clicks on them.

However, some HTML elements, such as buttons, hyperlinks(<a>), and inputs are originally designed to be interactive and they can be clicked by the users.

But, sometimes, we want to prevent the default clicking on elements. For example, if the user has not filled all mandatory fields in the form, we want to keep the submit button disabled i.e. the user shouldn’t be allowed to click on the submit button.

Similar situations can also occur for hyperlinks and inputs where you need to disable the click event.

In this article, We will learn how we can disable click events on various elements with CSS. We will also discuss the pros and cons of using CSS to disable clicking on elements.

Disable Click Event using pointer-events Property

The pointer-events property specifies whether or not an element should allow various pointer events such as mouse hover, mouse click, double click, mouse enter, mouse leave, and so on.

So, if you want to disable click events on any HTML element, you can simply set its pointer-events property to none.

When you set the pointer-events property to none, it disables all kinds of mouse events such as hover, click, double click, etc. on that element. So, the element becomes completely disabled.

Let’s say we have two buttons in our HTML file. We want to disable all click events on the first button, whereas, we want to keep the second button as it is.

<button class="disabled">Click Me</button>
<button>Click Me</button>

To disable all click events on the first button, set its pointer-events property to none. This will make it completely disabled.

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

Below is the outcome of the above code:

As you can see from the above demo image, the first button is not responding to the click event because we have set its pointer-events to none. Whereas, the second button is working normally.

Now, one question arises, will the pointer-events: none; also disable the click event on those HTML elements which do not have a default click behavior, such as a div, paragraph, list?

Well, the answer is yes. The pointer-events: none; works on all elements irrespective of their default click behavior.

Let me show you this with an example.

Let’s say we have two div elements and we have explicitly added a function changeColor() to their onclick attribute, which changes the div’s background color on the click event:

<div onclick="changeColor(this)">
    Click on me to change color(No pointer-events)
</div>

<div class="disabled" onclick="changeColor(this)">
    This div has pointer-event: none;
</div>

Inside our JavaScript file, we have defined the changeColor() function, which triggers on the click event and set the clicked div’s background color to yellow:

// Change divs' background color to yellow
function changeColor(target){
    target.style.backgroundColor = 'yellow';
}

Now, we only want to change the background color of the first div element whenever someone clicks on it, whereas, we don’t want the second div to respond to the click event.

To do that, we can simply set its pointer-events property to none. This will prevent all kinds of pointer events.

/*Make the element disabled to pointer events*/
.disabled{
   pointer-events: none;
}

div{
    background-color: lightblue;
    padding: 10px;
    margin-bottom: 10px;
}

Below is the outcome of the above code:

Will pointer-events:none; Also Disable Hover Effect?

In the last few examples, we saw how we can disable the click event with pointer-events: none;. But, did you notice that it would also disable other events such as hover, mouseenter, mouseleave, etc. along with the click event?

Well, that is the main problem that we face while disabling the click events with the pointer-events property.

Let me show you this with an example.

Let’s say we have two div elements and we want to disable only the click event on the second div element but we want to keep the hover effects on both divs.

<div>
    This div's pointer events are not disabled.
</div>

<div class="disabled">
    This div has pointer-event: none;
</div>

Let’s now try to disable the click event on the second div:

div{
    padding: 10px;
    background-color: lightgreen;
    margin-bottom: 10px;
}

div:hover{
    background-color: yellow;
}
   
.disabled{
    pointer-events: none;
}

Here is the outcome of the above CSS code:

As you can see from the above gif, we only wanted to disable the click event on the second div, but it has also disabled the hover event unknowingly.

So, wherever, you are using the pointer-events: none;, you have to keep in mind that it will disable all kinds of pointer events.

Conclusion

In this article, we learned how we can disable click events using CSS.

To disable click events in CSS, we can use the pointer-events property. If you set the pointer-events property to none, it will disable all kinds of pointer events on that element such as click, hover, mouseenter, mouseleave, dbclick, etc.

Thanks for reading.