css ‘pointer-events’ Eigenschaftsalternative für IE

Ich habe ein Dropdown-Navigationsmenü, in dem einige der Titel beim Anklicken nicht zu einer anderen Seite navigieren sollten (diese Titel öffnen beim Anklicken ein Dropdown-Menü), während andere navigieren sollten (diese haben kein Dropdown-Menü und navigieren direkt). Typen haben href für sie definiert

Um dies zu lösen, habe ich das folgende CSS für den früheren Titeltyp hinzugefügt

pointer-events: none;

und es funktioniert gut. Da diese Eigenschaft jedoch nicht vom IE unterstützt wird, suche ich nach einer Problemumgehung. Das nervige ist das Ich habe keinen Zugriff und keine Berechtigung, den HTML- und JavaScript-Code zu ändern vollständig.

Irgendwelche Ideen?

Pointer-Events ist ein Mozilla-Hack, und wo es in Webkit-Browsern implementiert wurde, können Sie nicht erwarten, es in IE-Browsern für eine weitere Million Jahre zu sehen.

Es gibt jedoch eine Lösung, die ich gefunden habe:

Weiterleitung von Mausereignissen durch Ebenen

Dies verwendet ein Plugin, das einige nicht bekannte/verstandene Eigenschaften von Javascript verwendet, um das Mausereignis zu nehmen und es an ein anderes Element zu senden.

Es gibt auch eine andere Javascript-Lösung Hier.

Aktualisierung für Oktober 2013: anscheinend kommt es in v11 zum IE. Quelle. Danke Tim.

Hier ist eine weitere Lösung, die mit 5 Zeilen Code sehr einfach zu implementieren ist:

1. Erfassen Sie das ‘Mousedown’-Ereignis für das oberste Element (das Element, für das Sie Zeigerereignisse deaktivieren möchten).
2. Verstecken Sie im ‘Mousedown’ das oberste Element.
3. Verwenden Sie „document.elementFromPoint()“, um das zugrunde liegende Element abzurufen.
4. Blenden Sie das oberste Element ein.
5. Führen Sie das gewünschte Ereignis für das zugrunde liegende Element aus.

Beispiel:

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

});

Es gibt eine Problemumgehung für IE – verwenden Sie Inline-SVG und setzen Sie pointer-events=”none” in SVG. Siehe meine Antwort in Wie man Internet Explorer dazu bringt, Pointer-Events zu emulieren: keine?

Es ist erwähnenswert, dass speziell für IE, disabled=disabled funktioniert für Anker-Tags:

<a href="https://stackoverflow.com/questions/5855135/contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>

IE behandelt dies als eine disabled -Element und löst kein Klickereignis aus. Aber, disabled ist kein gültiges Attribut für ein Anker-Tag. Daher funktioniert dies nicht in anderen Browsern. Für Sie pointer-events:none ist im Styling erforderlich.

AKTUALISIERUNG 1: Das Hinzufügen der folgenden Regel fühlt sich für mich wie eine Cross-Browser-Lösung an

AKTUALISIERUNG 2: Zur weiteren Kompatibilität, da IE keine Stile für Anker-Tags mit bildet disabled='disabled'also werden sie es immer noch sehen aktiv. Daher, a:hover{} Regel und Styling ist eine gute Idee:

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

Funktioniert mit Chrome, IE11 und IE8.
Natürlich geht CSS davon aus, dass Anker-Tags mit gerendert werden disabled="disabled"

Hier ist ein kleines Skript, das diese Funktion implementiert (inspiriert von der Blogartikel von Shea Frederick die Kyle erwähnt):

• Zeigerereignisse Polyfill.

Decken Sie die anstößigen Elemente mit einem unsichtbaren Block ab, indem Sie ein Pseudoelement verwenden: :before oder :after

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

Somit landet Ihr Klick auf dem übergeordneten Element. Nicht gut, wenn das übergeordnete Element anklickbar ist, aber ansonsten gut funktioniert.

Ich habe fast zwei Tage damit verbracht, die Lösung für dieses Problem zu finden, und ich habe sie endlich gefunden.

Dies verwendet Javascript und jquery.

(GitHub) pointer_events_polyfill

Dies könnte ein Javascript-Plug-in zum Herunterladen/Kopieren verwenden. Kopieren/laden Sie einfach die Codes von dieser Seite herunter und speichern Sie sie unter pointer_events_polyfill.js. Binden Sie dieses Javascript in Ihre Website ein.

<script src="https://stackoverflow.com/questions/5855135/JS/pointer_events_polyfill.js></script>

Fügen Sie diese JQuery-Skripte zu Ihrer Website hinzu

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

Und vergessen Sie nicht, Ihr jquery-Plug-in einzuschließen.

Es klappt! Ich kann Elemente unter dem transparenten Element anklicken. Ich verwende IE 10. Ich hoffe, dass dies auch in IE 9 und darunter funktionieren kann.

BEARBEITEN: Die Verwendung dieser Lösung funktioniert nicht, wenn Sie auf die Textfelder unter dem transparenten Element klicken. Um dieses Problem zu lösen, verwende ich den Fokus, wenn der Benutzer auf das Textfeld klickt.

Javascript:

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

JQuery:

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

Auf diese Weise können Sie den Text in das Textfeld eingeben.