Css 'pointer-events' property alternative for IE

Fooling IE with JavaScript

JavaScript can be our sly friend when CSS lets us down. Use a fallback mechanism with document.elementFromPoint() to discover the underlying element and dispatch events in a ninja-like fashion:

var invisibleShield = document.querySelector('.invisibleShield');
invisibleShield.addEventListener('click', function(e) {
  invisibleShield.style.display = 'none'; // The shield vanished! Nowhere to be seen.
  var hiddenElem = document.elementFromPoint(e.clientX, e.clientY); // Using x-ray vision to see through.
  e.target = hiddenElem; // Setting the target on the elements... surprise!
  hiddenElem.click(); // Gotcha! The real target has been clicked.
  invisibleShield.style.display = 'block'; // Abracadabra! The shield is back.
});


The old hover charm

With a pinch of CSS, we can cast a hover enchantment to simulate pointer-events in IE. It gives a visual clue on interaction, but it's like a ghost—it's there, but you can't click it:

a:hover { // It's like a chameleon. Change color when the mouse is over.
  color: red; // Red is the new Black!
}


Links with disability benefits

IE has a lesser-known secret—disabling links without the help of JavaScript. How? Use the disabled attribute and dress accordingly to show its inability:

<a href="#" disabled="disabled">I'm disabled, please don't click!</a>


a[disabled] { // Links on a sit-in protest. No work, until `disabled` is lifted.
  pointer-events: none; 
  color: grey; // Wearing the color of resilience
}


The Pointer Events Polyfill spell

The Pointer Events Polyfill is your wizard stick—it replicates pointer-events virtually across any browsers, making your web spell casting compatible in all realms including the IE:

<!-- Summon the Polyfill magic -->
<script src="pointer_events_polyfill.js"></script>


Hidden power of SVG

Lastly, inline SVG is like the comic book hero you never expected—it supports pointer-events in its own colorful world. Just overlay it on HTML elements to make them untouchable:

<svg>
  <rect width="100" height="100" pointer-events="none"></rect> <!-- A rectangle-shaped force field activated. -->
</svg>


IE's quirky personality traits

The vanishing trick with CSS

Internet Explorer can be wooed with good old CSS. The z-index, opacity, and visibility properties are your secret charms to make elements appear or disappear.

The tale of capturing and bubbling

IE’s got a thing about event propagation. It has its own tangled way of capturing and bubbling events. Understanding this could be your game changer.

Ghost styles with conditional stylesheets

Channel your inner wizard to control specific behaviors for IE. Cast the spell of conditional stylesheets or special CSS incantations:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-has-special-needs.css" />
<![endif]-->


Modernizr's magic pouch

Keep the trusty Modernizr up your sleeve for feature detection. It tells you whether pointer-events is in the game and lets you write conditional spells accordingly.