"Zeiger-Ereignisse: keine" funktioniert nicht in IE9 und IE10

Question

Die CSS-Eigenschaft pointer-events: none; funktioniert gut in Firefox, aber nicht in Internet Explorer 9-10.

Gibt es eine Möglichkeit, das gleiche Verhalten dieser Eigenschaft in IE zu erreichen? Irgendwelche Ideen?

Answer 1

Aus der MDN-Dokumentation:

Warnung: Die Verwendung von Zeiger-Ereignissen in CSS für Nicht-SVG-Elemente ist experimentell. Die Funktion war früher Teil der CSS3-UI-Entwurfsspezifikation, wurde aber aufgrund vieler offener Probleme auf CSS4 verschoben.

Read more here grundsätzlich pointer-events auf einem Nicht-SVG (Scalable Vector Graphic) ist nicht-Standard.
Wenn Sie die Browser-Unterstützung Tabelle auf der gelinkten Seite überprüfen (etwa zwei Drittel nach unten) Sie werden bemerken, dass der IE-Unterstützung auf nicht-SVG ist ziltsh, Jack-Hocke, naut, ... nicht unterstützt , das ist.

Nach einigem Graben, ich habe über this article gekommen, dass für Sie das Verhalten durch die Verwendung von Schichten imitieren lässt, und dank this post, fand ich this JS-bin, die helfen könnten ...

jedoch in IE (und Opera und AFAIK alle Browser), könnten Sie einfach eine Art von Cursor zwingen, auf ein Element:

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*/ 
} 

Das Ergebnis sollte ziemlich ähnlich der pointer-events: none;

Wenn Sie die Klickereignisse in IE verhindern möchten, die, wie shasi darauf hingewiesen hat, in anderen Browsern verhindert wird, fügen Sie einfach einen Ereignislistener hinzu, der das Klickereignis delegiert.
Ich werde im Moment davon ausgehen, dass Sie alle a Elemente sind Targeting:

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); 

dass alle Klickereignisse auf Ankerelemente verhindern soll.

Answer 2

Von an den APIs suchen, glaube ich nicht, Points.js Rich-Harris, noch Hands.js, Unterstützung für Zeiger-Veranstaltungen bieten: keine.

So ich implementiert nur ein kleines Skript diese Funktion POLYfill:

• Pointer Events Polyfill.

Answer 3

Für crappy IE10, gibt es eine andere Lösung, Beispiel:

/* 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; 
}