How to Prevent Elements Receiving Click Events With CSS

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:

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

<style>
    a {
        pointer-events: none;
    }
</style>

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

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.

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

<style>
    div {
        pointer-events: none;
    }
</style>

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:

a {
    pointer-events: initial;
}

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

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.

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: 

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.

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

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.

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.

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

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.

CSSLearn CSS from start to finishCSS is a core part of the web that lets you create stunning designs, interactive elements, and animations.Learn More