CssHow-ToBeginner · 3 min read

How to Disable Pointer Events in CSS: Simple Guide

To disable pointer events in CSS, use the pointer-events: none; property on the element. This makes the element ignore all mouse and touch interactions, allowing clicks to pass through to elements behind it.

📐

Syntax

The CSS property pointer-events controls whether an element can be the target of mouse or touch events.

Setting it to none disables all pointer interactions on that element.

css

selector {
  pointer-events: none;
}

💻

Example

This example shows a red box that ignores clicks because pointer-events: none; is applied. The blue box behind it can still be clicked.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Disable Pointer Events Example</title>
<style>
  .red-box {
    width: 200px;
    height: 200px;
    background-color: red;
    pointer-events: none;
    position: absolute;
    top: 50px;
    left: 50px;
  }
  .blue-box {
    width: 200px;
    height: 200px;
    background-color: blue;
    position: absolute;
    top: 100px;
    left: 100px;
  }
</style>
</head>
<body>
  <div class="red-box"></div>
  <button class="blue-box" onclick="alert('Blue box clicked!')">Click me</button>
</body>
</html>

Output

A red square is visible on top but clicking it does nothing; clicking the overlapping blue button behind it triggers an alert.

⚠️

Common Pitfalls

One common mistake is expecting pointer-events: none; to disable keyboard focus or accessibility interactions. It only disables mouse and touch events.

Also, if you want to disable pointer events only on child elements but keep the parent interactive, apply pointer-events: none; selectively.

css

/* Wrong: disables pointer events on parent and children */
.parent {
  pointer-events: none;
}

/* Right: disables pointer events only on children */
.parent {
  pointer-events: auto;
}
.child {
  pointer-events: none;
}

📊

Quick Reference

Value	Effect
none	Disables all pointer events on the element
auto	Enables pointer events (default behavior)
visiblePainted	Only painted areas respond to pointer events (SVG only)

✅

Key Takeaways

Use pointer-events: none; to make an element ignore mouse and touch events.

This property does not disable keyboard focus or accessibility features.

Apply pointer-events carefully to parents and children to control interactivity.

Elements with disabled pointer events allow clicks to pass through to elements behind them.