Html/css: Make a div "invisible" to clicks?

Under the hood: pointer-events explained

The pointer-events property dictates whether or not the element will respond to mouse/touch events. When set to 'none', it instructs the element to ignore pointer actions and allows the events to access elements underneath. This is supported in most of the modern browsers: Firefox 3.6+, Chrome 2+, IE 11+, and Safari 4+.

Alternative methods for mouse events

When pointer-events: none; isn't the right fit, JavaScript can be DP (Designated Player).

Using JavaScript to dodge clicks

Temporarily vanish the overlay div to interact with elements underneath:

function dodgingOverlay(id) {
  var overlay = document.getElementById(id);
  overlay.style.display = 'none'; // 🎩 "Now you see me..."
  var x = event.clientX, y = event.clientY;
  var elementMouseIsOver = document.elementFromPoint(x, y);
  overlay.style.display = 'block'; // 🎩 "...now you don't!"
  return elementMouseIsOver;
}


Delegating clicks with JavaScript

Detect the click and delegate it to underlying baby:

document.addEventListener('click', function(event) {
  var overlay = document.elementFromPoint(event.clientX, event.clientY);
  if (overlay.classList.contains('no-click')) {
    overlay.style.pointerEvents = 'auto'; // 💤 Wake up overlay!
    var target = dodgingOverlay('overlayDivId');
    target.click();
    overlay.style.pointerEvents = 'none'; // 😴 Back to sleep, overlay!
  }
});


Unbinding events with jQuery

Still tight with jQuery? Unbind events from a div:

$('#myDivId').css('pointer-events', 'none').unbind(); // 🤐 Shush, div, let me handle this!


Remember, for performance reasons, direct DOM manipulation is often given preference over jQuery.

Accessibility and the story of unclickable divs

Creating unclickable elements can fix layout issues, but make sure your changes don't mess with accessibility. Because, well, we care.

Tackling possible setbacks and their solutions:

Ensuring consistent UI behavior

pointer-events: none; can sometimes be a party pooper and interfere with the user interaction as expected. Always test your UI to confirm elements are accessible and behaving as they should be.

Handling dynamic content

If your overlay div has a mood of its own and keeps changing with user interaction, you might need to toggle the pointer-events property at runtime.

function togglePointerEvents(id, state) {
  var overlay = document.getElementById(id);
  overlay.style.pointerEvents = state ? 'none' : 'auto'; // 👍 Do as you're told overlay!
}


Cross-browser compatibility

Confirm your implementation doesn't play an uno reverse card and break the functionality in outdated or less popular browsers. Just have a Plan B ready.