Make element unclickable (click things behind it)

The ins and outs of pointer-events

pointer-events is a versatile property offering several options to control pointer interactions. However, be aware that the property is not supported by Internet Explorer 10 and its predecessors. It effectively deals with both clicks and touch events on touchscreen devices.

Pointer-events property values

The pointer-events property comes with a range of values to match your specific use cases:

• auto: The default value allowing pointer interactions.
• none: Blocks all kinds of pointer interactions.
• SVG-specific values (visiblePainted, visibleFill, visibleStroke, and visible): Lets you fine-tune interaction with SVG elements depending on their visibility and paint type.

Remember: The Devil is in the details! 😈

Affect on scroll and drag operations

When pointer-events: none is applied on an element, it becomes transparent to interaction. In some common scenarios like overlays, this proves incredibly useful as it enables scrolling and dragging operations on underlying page content without being intercepted by the overlay.

Dynamically controlling pointer-events with JavaScript

JavaScript comes in handy when you need to toggle an element's click-through behavior dynamically. Use the style property to set pointerEvents on or off based on your needs:

function toggleClickThrough(element, enable) {
  element.style.pointerEvents = enable ? 'none' : 'auto'; // Toggle ghost mode
}

// Usage:
// To activate ghost mode
toggleClickThrough(document.getElementById('myElement'), true);
// To deactivate ghost mode
toggleClickThrough(document.getElementById('myElement'), false);


When 'pointer-events: none' comes in handy

This property lends itself to several practical usage scenarios, such as:

• Implementing gamespace elements that shouldn't interfere with gameplay. Your bullets will thank you later! 🔫
• Crafting UI overlays that shouldn't block user interaction with elements underneath.

Things to be mindful of

While pointer-events: none is generally a cool utility, you must watch out for a couple of potential trap doors:

• Using it on interactive elements (like buttons or form inputs) can confuse users.
• Older versions of Internet Explorer outright deny its existence. Treat with caution!

Live coding example

To bring the discussion to life, here's a JSFiddle example demonstrating how to make stuff ignore your clicks: JSFiddle Example