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

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?

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.

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;

});

Istnieje obejście dla IE - użyj wbudowanego SVG i ustaw pointer-events = "none" w SVG. Zobacz moją odpowiedź w artykule Jak sprawić, by program Internet Explorer emulował zdarzenia wskaźnika: brak?

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"

Oto mały skrypt implementujący tę funkcję (zainspirowany artykułem na blogu Shea Frederick, o którym wspomina Kyle):

• Wypełnianie zdarzeń wskaźnika .

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.

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.

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.

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

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.

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

Najlepsze rozwiązanie:

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

Działa doskonale we wszystkich przeglądarkach