"pointer-events: none" non funziona in IE9 e IE10

Question

Il CSS - proprietà pointer-events: none; funziona correttamente in Firefox, ma non in Internet Explorer 9-10.

Esiste un modo per ottenere lo stesso comportamento di questa proprietà in IE? Qualche idea?

Answer 1

Dalla documentazione MDN:

Attenzione: L'uso di puntatore-eventi in CSS per gli elementi non SVG è sperimentale. La funzione faceva parte delle specifiche di bozza dell'interfaccia utente CSS3 ma, a causa di molti problemi aperti, è stata posticipata ai CSS4.

Read more here, in fondo, pointer-events su un non-formato SVG (Scalable Vector Graphic) è non-standard.
Se si seleziona la tabella di supporto del browser sulla pagina collegata (circa due terzi verso il basso) si noterà che il supporto di IE sulla non svg di è ziltsh, jack tozzo, naut, ... non supportate , questo è.

Dopo un po 'di scavo, sono venuto in tutta this article che non consentono per voi di imitare i comportamenti attraverso l'uso di strati, e, grazie a this post, ho trovato this JS-bin che potrebbe aiutare ...

Tuttavia, in IE (e Opera, e AFAIK tutti i browser), si potrebbe semplicemente forzare un tipo di cursore su un elemento:

a, a:hover, a:visited, a:active, a:focus /*, * <-- add all tags?*/ 
{ 
    cursor: default;/*plain arrow*/ 
    text-decoration: none;/*No underline or something*/ 
    color: #07C;/*Default link colour*/ 
} 

Il risultato dovrebbe essere abbastanza simile a quella di pointer-events: none;

Aggiornamento:

Se si desidera impedire gli eventi click in IE che, come Shasi ha sottolineato, è impedito in altri browser, è sufficiente aggiungere un listener di eventi che i delegati l'evento Click.
darò per scontato, in questo momento, che si sta come obiettivo tutte le a elementi:

var handler = function(e) 
{ 
    e = e || window.event; 
    var target = e.target || e.srcElement; 
    if (target.tagName.toLowerCase() === 'a') 
    { 
     if (!e.preventDefault) 
     {//IE quirks 
      e.returnValue = false; 
      e.cancelBubble = true; 
     } 
     e.preventDefault(); 
     e.stopPropagation(); 
    } 
}; 
if (window.addEventListener) 
    window.addEventListener('click', handler, false); 
else 
    window.attachEvent('onclick', handler); 

che dovrebbero impedire tutti gli eventi click su elementi di ancoraggio.

Answer 2

Dal punto di vista delle API, non penso che Points.js di Rich Harris, né , supportino gli eventi puntatore : nessuno.

Così, ho appena implementato uno script molto piccolo per Polyfill questa funzione:

• Pointer Events Polyfill.

Answer 3

Per scadente IE10, c'è un'altra soluzione, ad esempio:

/* must be over the element that have the action */ 

.action-container:after { 
    content: ' '; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 250; 
    background-color: grey; /* must have a color on ie10, if not :after does not exist... */ 
    opacity: 0; 
}