CSS-Eigenschaftsalternative 'Zeigerereignisse' für IE

Ich habe ein Dropdown-Navigationsmenü, in dem ein Teil des Titels beim Klicken nicht zu einer anderen Seite navigieren sollte (diese Titel öffnen beim Klicken ein Dropdown-Menü), während andere navigieren sollten (diese haben kein Dropdown-Menü und navigieren direkt). Beide jedoch Typen haben sie hrefdefiniert

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

pointer-events: none;

und da es gut funktioniert. Aber da diese Eigenschaft nicht vom IE unterstützt wird, suche ich nach einer Lösung. Das nervige ist, dass ich keinen Zugriff und keine Berechtigung habe, den HTML- und JavaScript-Code vollständig zu ändern .

Irgendwelche Ideen?

Zeigerereignisse sind ein Mozilla-Hack, und wo sie in Webkit-Browsern implementiert wurden, können Sie nicht erwarten, dass sie für weitere Millionen Jahre in IE-Browsern angezeigt werden.

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

Weiterleiten von Mausereignissen über Ebenen

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

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

Update für Oktober 2013 : Anscheinend kommt es in Version 11 zum IE. Quelle . Danke Tim.

Hier ist eine weitere Lösung, die mit 5 Codezeilen 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 obere Element aus.
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 Zeigerereignisse = "keine" in SVG. Siehe meine Antwort unter Wie man Internet Explorer Zeigerereignisse emulieren lässt: keine?

Es ist erwähnenswert, dass speziell für IE für Ankertags disabled=disabledfunktioniert:

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

IE behandelt dies als disabledElement und löst kein Klickereignis aus. Ist disabledjedoch kein gültiges Attribut für ein Ankertag. Daher funktioniert dies in anderen Browsern nicht. Für sie pointer-events:noneist im Styling erforderlich.

UPDATE 1 : Das Hinzufügen der folgenden Regel fühlt sich für mich wie eine browserübergreifende Lösung an.

UPDATE 2 : Zur weiteren Kompatibilität, da der IE keine Stile für Ankertags mit bildet disabled='disabled', sodass diese weiterhin aktiv aussehen . So 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;
        }

Arbeiten an Chrome, IE11 und IE8.
In CSS wird natürlich davon ausgegangen, dass Ankertags mit gerendert werdendisabled="disabled"

Hier ist ein kleines Skript, das diese Funktion implementiert (inspiriert von dem Blog-Artikel von Shea Frederick , den Kyle erwähnt):

• Zeigerereignisse Polyfill .

Decken Sie die betreffenden Elemente mit einem unsichtbaren Block ab, indem Sie ein Pseudoelement verwenden: :beforeoder: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 Site herunter und speichern Sie sie unter pointer_events_polyfill.js. Fügen Sie dieses Javascript Ihrer Site hinzu.

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

Fügen Sie diese JQuery-Skripte Ihrer Site hinzu

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

Und vergessen Sie nicht, Ihr jquery-Plug-In beizufügen.

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

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.

Ich habe eine andere Lösung gefunden, um dieses Problem zu lösen. Ich benutze jQuery, um das href-attribute auf javascript:;(nicht '', oder der Browser lädt die Seite neu) zu setzen, wenn die Breite des Browserfensters größer als 1'000px ist. Sie müssen Ihrem Link eine ID hinzufügen. Folgendes mache ich:

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

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

Vielleicht ist es nützlich für Sie.

Verwenden OnClientClick = "return false;"

Sie können auch einfach "keine" URL in das <a>Tag einfügen. Ich mache dies für Menüs, <a>die mit Dropdowns versehen sind. Wenn es kein Dropdown gibt, füge ich die URL hinzu, aber wenn es Dropdowns mit einer <ul> <li>Liste gibt, entferne ich sie einfach.

Ich hatte ähnliche Probleme:

1. Ich habe dieses Problem in einer Direktive behandelt. Ich habe es behoben, indem ich ein übergeordnetes Element hinzugefügt und Zeigerereignisse erstellt habe: keine dafür

2. Das obige Update funktionierte nicht für das Select-Tag, dann fügte ich den Cursor hinzu : Text (was ich wollte) und es funktionierte für mich

Wenn ein normaler Cursor benötigt wird, können Sie den Cursor hinzufügen : Standard

Beste Lösung:

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

Läuft perfekt in allen Browsern