css 'pointer-events' alternatywa dla właściwości IE

155

Mam rozwijane menu nawigacyjne, w którym niektóre tytuły nie powinny przechodzić do innej strony po kliknięciu (te tytuły otwierają menu rozwijane po kliknięciu), podczas gdy inne powinny nawigować (nie mają menu rozwijanego i nawigacji bezpośrednio). typy hrefzdefiniowane dla nich

Aby rozwiązać ten problem, dodałem następujący CSS dla poprzedniego typu tytułów

pointer-events: none;

i działa dobrze.Ale ponieważ ta właściwość nie jest obsługiwana przez IE, szukam obejścia. Irytujące jest to, że nie mam dostępu i uprawnień do całkowitej zmiany kodu HTML i JavaScript .

Jakieś pomysły?

anupam
źródło
2
Czy istnieje sposób na uzyskanie dostępu do kodu HTML i skryptów? Spróbuj porozmawiać z kimś, kto dał ci zadanie.
Kyle
@Kyle To nie jest do końca problem z przywilejami, są pewne techniczne trudności również w modyfikacji kodu HTML / javascript
anupam
2
Oto odpowiedź stackoverflow.com/questions/3680429/…
Sanket Sahu
3
Zauważ, że pointer-eventsjest teraz w IE11 +
David Storey

Odpowiedzi:

88

Pointer-events to hack Mozilli i jeśli został zaimplementowany w przeglądarkach Webkit, nie możesz oczekiwać, że zobaczysz go w przeglądarkach IE przez kolejny milion lat.

Jest jednak rozwiązanie, które znalazłem:

Przekazywanie zdarzeń myszy przez warstwy

Wykorzystuje to wtyczkę, która wykorzystuje niektóre niezbyt znane / zrozumiałe właściwości JavaScript do przejmowania zdarzenia myszy i wysyłania go do innego elementu.

Jest też inne rozwiązanie JavaScript tutaj .

Aktualizacja na październik 2013 : najwyraźniej pojawi się w IE w wersji 11. Źródło . Dzięki Tim.

Kyle
źródło
4
Dokumentacja ie9 mówi, że obsługuje tę właściwość (nie próbowałem jeszcze ie9). W każdym razie miałem już w głowie pomysły, które są podane w linkach, ale ponieważ szukałem konkretnego rozwiązania CSS, nie mogę ich użyć. Postaram się zmodyfikować kod html / js zamiast spędzać czas na tym
problemie
11
Na W3C ten problem był przedmiotem debaty z powodu przechwytywania kliknięć . Ogólna zasada: jak tylko W3C opublikuje rekomendację kandydata, zespół IE go wdroży i zawsze jest lekcja pośpiechu . Poza tym Mozilla powiedziała wszystkoOstrzeżenie: użycie zdarzeń wskaźnika w CSS dla elementów innych niż SVG jest eksperymentalne. Ta funkcja była kiedyś częścią specyfikacji roboczej CSS3 UI, ale z powodu wielu otwartych problemów została przesunięta do CSS4 .
vulcan raven,
8
Według caniuse.com zdarzenia wskaźnika CSS pojawią się w IE 11. caniuse.com/#feat=pointer-events
Tim
4
To nie jest powód, aby negatywnie oceniać odpowiedź @eyurdakul
scumah
14
"you can't expect to see it in IE browsers for another million years."Zajęło to tylko 3 lata ...
ProblemsOfSumit
20

Oto kolejne rozwiązanie, które jest bardzo łatwe do zaimplementowania z 5 wierszami kodu:

  1. Przechwyć zdarzenie „mousedown” dla górnego elementu (elementu, dla którego chcesz wyłączyć zdarzenia wskaźnika).
  2. W „mousedown” ukryj górny element.
  3. Użyj metody „document.elementFromPoint ()”, aby pobrać element bazowy.
  4. Odkryj górny element.
  5. Wykonaj żądane zdarzenie dla elementu bazowego.

Przykład:

//This is an IE fix because pointer-events does not work in IE
$(document).on('mousedown', '.TopElement', function (e) {

    $(this).hide();
    var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
    $(this).show();
    $(BottomElement).mousedown(); //Manually fire the event for desired underlying element

    return false;

});
MarzSocks
źródło
2
To zadziałało dla mnie. Wolę małe poprawki, które mogę umieścić w moim kodzie js zamiast dodawania wielu polyfillów;)
dippas
To kreatywne rozwiązanie, podoba mi się. Jedynym problemem jest to dodaje niepotrzebne przetwarzanie do przeglądarek, gdzie punkt imprezy zrobić pracę. Byłoby wspaniale, gdyby było to uruchamiane warunkowo tylko w przeglądarkach IE.
Trevor,
Zgadzam się, jest to szybko możliwe do zaimplementowania w kłopotliwym problemie, ale w rzeczywistości w mojej implementacji go stosuję tylko, jeśli przeglądarka to IE, umieszczasz ją w tym sprawdzeniu: if (navigator.appName == 'Microsoft Internet Explorer' ) {... logika idzie tutaj ..}
MarzSocks
3
to działa bardzo dobrze! ponieważ np. 11 podobno zaczęło obsługiwać zdarzenia wskaźnikowe, po prostu zawijam to w tę klauzulę: if (navigator.userAgent.toLowerCase (). indexOf ('msie')> 0) DZIĘKUJĘ!
Hank
10

Warto wspomnieć, że specjalnie dla IE disabled=disableddziała dla tagów kotwicy:

<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>

IE traktuje to jako disabledelement i nie wywołuje zdarzenia kliknięcia. Jednak disablednie jest prawidłowym atrybutem w tagu kotwicy. Dlatego to nie zadziała w innych przeglądarkach. Do nich pointer-events:nonewymagana jest stylizacja.

AKTUALIZACJA 1 : Dodanie następującej reguły wydaje mi się rozwiązaniem dla różnych przeglądarek.

AKTUALIZACJA 2 : Dla dalszej kompatybilności, ponieważ IE nie będzie tworzył stylów dla znaczników kotwicy z disabled='disabled', więc nadal będą wyglądać na aktywne. Zatem a:hover{}zasada i stylizacja to dobry pomysł:

a[disabled="disabled"] {
        pointer-events: none; /* this is enough for non-IE browsers */
        color: darkgrey;      /* IE */
    }
        /* IE - disable hover effects */   
        a[disabled="disabled"]:hover {
            cursor:default;
            color: darkgrey;
            text-decoration:none;
        }

Praca w Chrome, IE11 i IE8.
Oczywiście powyższy CSS zakłada, że ​​tagi kotwicy są renderowane zdisabled="disabled"

Niks
źródło
1
To nie zadziałało dla mnie. W IE9-10 funkcje onclick nadal działają.
pewnościąakey
4

Zakryj naruszające elementy niewidocznym blokiem, używając pseudoelementu: :beforelub:after

a:before {
//IE No click hack by covering the element.
  display:block;
  position:absolute;
  height:100%;
  width:100%;
  content:' ';
}

W ten sposób kliknięcie trafia do elementu nadrzędnego. Nie dobrze, jeśli rodzic jest klikalny, ale poza tym działa dobrze.

Graham P. Heath
źródło
1
Użyłem podobnego pomysłu z atrybutem disabled. W IE dodanie atrybutu disabled zapobiega zdarzeniom związanym z kliknięciami, ale jeśli istnieją elementy podrzędne, nadal będą powodować kliknięcie. zasłanianie dzieci, aby nie były klikalne, to świetne rozwiązanie. Musiałem użyć koloru tła z kryciem 0, aby rejestr IE był tam rzeczywisty.
Blake Plumb
4

Spędziłem prawie dwa dni na znalezieniu rozwiązania tego problemu i wreszcie to znalazłem.

Używa javascript i jquery.

(GitHub) pointer_events_polyfill

Może to wymagać pobrania / skopiowania wtyczki javascript. Po prostu skopiuj / pobierz kody z tej strony i zapisz je jako pointer_events_polyfill.js. Umieść ten skrypt javascript w swojej witrynie.

<script src="JS/pointer_events_polyfill.js></script>

Dodaj te skrypty jquery do swojej witryny

$(document).ready(function(){
    PointerEventsPolyfill.initialize({});
});

I nie zapomnij dołączyć swojej wtyczki jquery.

To działa! Mogę klikać elementy pod przezroczystym elementem. Używam IE 10. Mam nadzieję, że to działa również w IE 9 i poniżej.

EDYCJA: Korzystanie z tego rozwiązania nie działa po kliknięciu pól tekstowych poniżej przezroczystego elementu. Aby rozwiązać ten problem, używam fokusa, gdy użytkownik kliknie pole tekstowe.

JavaScript:

document.getElementById("theTextbox").focus();

JQuery:

$("#theTextbox").focus();

Umożliwia to wpisanie tekstu w polu tekstowym.

Mai
źródło
1

Znalazłem inne rozwiązanie tego problemu. Używam jQuery, aby ustawić href-attribute na javascript:;(nie '', albo przeglądarka ponownie załaduje stronę), jeśli szerokość okna przeglądarki jest większa niż 1'000px. Musisz dodać identyfikator do swojego łącza. Oto co robię:

// get current browser width
var width = $(window).width();
if (width >= 1001) {

    // refer link to nothing
    $("a#linkID").attr('href', 'javascript:;'); 
}

Może to ci się przyda.

yves.beutler
źródło
0

Posługiwać się OnClientClick = "return false;"

Medde
źródło
0

Możesz także po prostu „nie” dodawać adresu URL w <a>tagu, robię to również dla menu, które są <a>oparte na tagach za pomocą menu rozwijanych. Jeśli nie ma listy rozwijanej, dodaję adres URL, ale jeśli są listy rozwijane z <ul> <li>listą, po prostu ją usuwam.

user3657756
źródło
0

Napotkałem podobne problemy:

  1. Napotkałem ten problem w dyrektywie, naprawiłem go, dodając a jako element nadrzędny i tworząc zdarzenia wskaźnika: brak w tym przypadku

  2. Powyższa poprawka nie działała dla tagu select, potem dodałem kursor: tekst (co chciałem) i zadziałało dla mnie

Jeśli potrzebny jest normalny kursor, możesz dodać kursor: default

ZT
źródło
-1

Najlepsze rozwiązanie:

.disabled{filter: alpha(opacity=50);opacity: 0.5;z-index: 1;pointer-events: none;}

Działa doskonale we wszystkich przeglądarkach

Rafa Baldayo
źródło
3
Z wyjątkiem wersji IE <11, gdzie zdarzenia wskaźnika nie są obsługiwane. Myślę, że przegapiłeś punkt.
więzienny mikrofon