πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Prevent Elements Receiving Click Events With CSS

How to Prevent Elements Receiving Click Events With CSS

And other solutions
Ferenc Almasi β€’ Last updated 2024 February 20 β€’ Read time 5 min read

If you want to avoid receiving click events for an element or you want it to be click-through, simply set the pointer-events property on the element to none with CSS:

Copied to clipboard! Playground
<a href="#">You won't be able to interact with this element.</a>

<style>
    a {
        pointer-events: none;
    }
</style>
How to prevent click events with CSS

How Pointer Events Work

In the above example, the anchor element will still be selectable, but interaction will be disabled. Setting pointer-events to none will not only disable click events on the selected element but also on its child elements. For example, in the following code, the anchor will be disabled too, even though the property is attached to its parent.

Copied to clipboard! Playground
<div>
    <a href="#">You won't be able to interact with this element.</a>
</div>

<style>
    div {
        pointer-events: none;
    }
</style>
Pointer events will disable interaction on child elements too

By setting pointer-events to none, the element becomes "transparent" to pointer events, meaning it won't capture any clicks or other pointer interactions, and they'll pass through to the element behind it.

This effectively disables click events on the element without removing event listeners or preventing default behavior through JavaScript. To reenable click events on disabled elements, we can set pointer-events back to auto, its initial value:

Copied to clipboard!
a {
    pointer-events: initial;
}
How to reenable click events

Keep in mind that using pointer-events: none; might affect the usability and accessibility of your application, so use it with caution.


When to Prevent Click Events

Preventing click events can be useful in various scenarios where you want to control user interaction or prevent unintended actions. Some common use cases include:

  • Preventing default link behavior: The most common use case is intercepting clicks on anchor tags to prevent the default behavior of navigating to another page. This might be useful in cases where we want to handle navigation through JavaScript or perform some action before navigating.
  • Custom UI controls: Implementing custom UI controls where we need to control user interactions, such as sliders, dropdown menus, or custom checkboxes/radio buttons can also be handled through the pointer-event property.
  • Preventing actions during animation: Disabling certain UI elements during animations or transitions to avoid unexpected behavior or conflicts.
  • Visual effects: Using the pointer-events property comes especially useful if you have decorative elements covering another element that should receive click events. By using the above property, you can make sure that the click goes right through the element.
Looking to improve your skills? Master CSS from start to finish.
Master CSSinfo Remove ads

Other Ways to Prevent Click Events

Preventing click events can also be achieved by disabling the input element using the disabled attribute or by intercepting the click event through JavaScript. In the following example, one of the checkboxes is disabled through the disabled attribute: 

Refresh

Note that the presence of the disabled attribute alone indicates that the element will be disabled; assigning a value is unnecessary.

It's also possible to set the disabled attribute through JavaScript by setting the element's disabled property to true. Another way to prevent click events is to call event.preventDefault, as the first thing, to prevent the default behavior of the element.

Copied to clipboard! Playground
const element = document.querySelector('button')

element.addEventListener('click', event => {
    event.preventDefault()
    // Additional logic goes after the `preventDefault` call
})

// Or set the `disabled` property
element.disabled = true
Preventing click events through JavaScript

The above examples show how to prevent click events for a submit button in JavaScript.

  • Line 1: We first query the DOM element using document.querySelector and store it in the element variable.
  • Line 4: To prevent the default browser action, we need to call the preventDefault method on the event object which is automatically passed to the callback function of an event listener.
  • Line 9: Another way is to set the disabled property of the element to true. This prevents click events by disabling the element dynamically.

In terms of performance, prefer preventing click events through CSS instead of JavaScript for better performance. Use the above solutions when you need dynamic behavior.


CSS vs JavaScript

So which option should you use? Ultimately, the choice will depend on your specific requirements, but as a rule of thumb, use CSS when you have to deal with:

  • Simple interactions: If you only need to visually disable an element and don't need to perform any additional logic or actions when the element is clicked, then prefer using CSS.
  • Styling effects: If you're primarily concerned with the visual presentation of the element and want to indicate that it's not clickable, pointer-events: none; is a straightforward way to achieve this without affecting other aspects of the element's behavior.
  • Performance: Disabling pointer events with CSS can be more performant in some cases, especially for static elements or when you're dealing with a large number of elements. CSS-based solutions typically require less overhead than JavaScript event handling.

On the other hand, opt for using JavaScript if you need:

  • Dynamic interactions: If you need to dynamically enable or disable click events based on certain conditions, JavaScript allows you to add or remove event listeners, toggle event handling, or prevent default behavior based on more complex logic.
  • Additional logic: If you need to perform additional actions or validation when an element is clicked, such as form validation, triggering animations, updating the UI, or handling complex user interactions, then JavaScript offers more flexibility and control over these behaviors.

Summary

In summary, pointer-events: none; in CSS is suitable for scenarios where you want to visually disable an element without affecting its underlying functionality, while JavaScript is more appropriate when you need to dynamically control or modify the behavior of click events based on specific conditions or interactions. If you'd like to learn more about CSS, check out our category page, where you can find our latest CSS tutorials.

CSS
  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.