How to prevent the click event using CSS?

css

pointer-events

css-properties

user-experience

byNikita Barsukov·Feb 19, 2025

Counteract click events on an element by leveraging the CSS pointer-events property set to none. The element turns non-responsive to mouse clicks.

.avoid-click { pointer-events: none; /* Try to click me now! */ }

Merely add class="avoid-click" to your element:

<div class="avoid-click">No Click Zone</div>

Bear in mind, this method specifically targets mouse-triggered interactions, it won't combat keyboard or touch-screen based actions.

Additional considerations: Keyboard and touch-screen events

While pointer-events: none; works superbly in suppressing mouse-based interactions, it's won't deter keyboard navigation or touch events. To manage these effectively:

Keyboard: To dodge keyboard-based navigation, make sure the element isn't accessible via the tab sequence or control focus events utilizing JavaScript.
Touch screen: Analogous to mouse events, pointer-events: none will not deter touch events, however, these can be regulated by configuring touch events in JavaScript.

Proper usage scenarios for `pointer-events: none`

Certain situations where pointer-events: none; can be advantageous in refining your user experience include:

Error Prevention: If an element isn't supposed to be interacted with or isn't functioning yet, pointer-events: none; saves the day.
Visual Context: Use in conjunction with other CSS properties like opacity to provide a clear visual indication of non-interactivity.
Complex UI: Facilitates interaction with underlying content in complex interfaces with layered elements.
Animation Sequences: Temporary use during animations can prevent unintended interactions.

When CSS isn't enough: Alternative solutions

If dealing with touch and keyboard events, besides mouse, you are possibly looking at implementing JavaScript. Two such approaches can be:

Handling Events Listener

document.getElementById('elemID').addEventListener('click', function(e) {
  e.preventDefault(); //Stop! Hammer time! 🛑
}, false);

Handling Direct Attribute

document.getElementById('elemID').onclick = function() { return false; /* "Traitor!" – Click, probably */ }

The fine print: Limitations of blocking clicks using CSS

Browser compatibility: While widely supported amongst modern browsers, pointer-events: none; may falter with older browsers or niche ones. Always verify the Can I use... resource for compatibility.

Semantics: Employing CSS to deter interaction with elements might confuse users, especially in the absence of visual cues. Prioritize accessibility and UX when implementing pointer-events: none.

Nurturing UX norms with `pointer-events: none`

Visual and intuitive indicators of interactivity are vital for UX. Here are some recommendations when applying pointer-events: none.

Cursor customization: Adding cursor: default. Helps to visually indicate the element's non-clickable state.
Transition effects: Use CSS properties like opacity and transitions to denote the lack of interactivity user-friendly.
Accessibility: Keep users who leverage screen readers in mind. Consider using attributes like aria-disabled.