"Pointer-events: none" nie działa w IE9 i IE10

Question

CSS - właściwość pointer-events: none; działa poprawnie w przeglądarce Firefox, ale nie działa w przeglądarce Internet Explorer 9-10.

Czy istnieje sposób na zachowanie tego samego zachowania w IE? Jakieś pomysły?

Answer 1

Od docs MDN:

Ostrzeżenie: Zastosowanie wskaźnika-wydarzeń w CSS dla elementów innych niż SVG jest eksperymentalna. Ta funkcja była częścią specyfikacji projektu interfejsu użytkownika CSS3, ale z powodu wielu otwartych problemów została przełożona na CSS4.

Read more here, w zasadzie, pointer-events na non-SVG (Scalable Vector Graphic) jest niestandardowa.
Jeśli zaznaczysz tabelę support przeglądarka na powiązanej stronie (około dwie trzecie w dół) będziesz pamiętać, że IE wsparcie na non-SVG jest ziltsh, jack squat, naut ... nie obsługiwana , to jest.

Po pewnym kopania, ja natknąć this article że zezwala, aby naśladować zachowań poprzez zastosowanie warstw, a dzięki this post znalazłem this JS-bin To może pomóc ...

Jednak w IE (i Opera, a AFAIK wszystkie przeglądarki), można po prostu wymusić typ kursora na elemencie:

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

wynik powinien być całkiem podobna do tej z pointer-events: none;

Aktualizacja:

Jeśli chcesz, aby zapobiec zdarzeń kliknij IE, że jak SHASI wskazał, zapobiega się w innych przeglądarkach, wystarczy dodać detektor zdarzenia, który deleguje zdarzenia click.
będę zakładać, w tej chwili, że docierasz wszystkie a elementy:

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

To powinno zapobiec wszystkie zdarzenia kliknij na elementy kotwiące.

Answer 2

Od patrząc na API, nie sądzę Rich Harris Points.js, ani Hands.js, zapewnić wsparcie dla -wskaźnik zdarzeń: brak.

Tak więc, po prostu realizowane mały skrypt PolyFill tej funkcji:

• Pointer Events Polyfill.

Answer 3

Dla brzydko IE10, nie ma innego rozwiązania, na przykład:

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