css 'Zeiger-Ereignisse' Eigenschaft Alternative für IE

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

1. Erfassen die "mousedown" Ereignis für die top-element (das element, die Sie deaktivieren möchten pointer-events).
2. In der 'mousedown' hide top-element.
3. Verwenden 'document.elementFromPoint ()', um die zugrunde liegende element.
4. Einblenden top-element.
5. Führen Sie das gewünschte Ereignis für die zugrunde liegende element.

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;

});

InformationsquelleAutor der Antwort MarzSocks

Es ist erwähnenswert, dass speziell für den IE, disabled=disabled Werke für Anker-tags:

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

IE interpretiert dies als eine disabled element und löst keine click-Ereignis. Allerdings disabled ist kein gültiges Attribut bei einem anchor-tag. Also das wird nicht funktionieren, in anderen Browsern. Für Sie pointer-events:none im styling.

UPDATE 1: Also das hinzufügen folgender Regel fühlt sich an wie eine cross-browser Lösung für mich

UPDATE 2: Für bessere Kompatibilität, da der IE nicht form-styles für Anker-tags mit disabled='disabled', so dass Sie immer noch look aktiv. 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 auf Chrome, IE11 und IE8.

Natürlich über CSS übernimmt die Anker-tags werden gerendert mit disabled="disabled"

InformationsquelleAutor der Antwort Nikhil

Abdeckung, die problematischen Elemente mit ein unsichtbaren block, mit einem pseudo-element: :before oder :after

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

So, du bist auf Ländereien, die auf das übergeordnete element. Nicht gut, wenn die Eltern anklickbar ist, aber ansonsten.

InformationsquelleAutor der Antwort Graham P Heath

Ich habe eine andere Lösung gefunden um dieses problem zu lösen. Ich benutze jQuery um die href-Attribut zu javascript:; (nicht ' der ', oder der browser die Seite neu laden), wenn der browser-Fenster-Breite ist größer als 1'000px. Benötigen Sie eine ID an den link. Hier ist, was ich Tue:

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

InformationsquelleAutor der Antwort yves.beutler

Können Sie auch einfach "nicht" hinzufügen einer url innerhalb der <a> tag, ich mache das für Menüs, sind <a> tag Gefahren mit drop-down-als auch. Wenn es nicht fallen nach unten, dann füge ich die url aber wenn es drop-downs mit einem <ul> <li> Liste ich einfach zu entfernen.

InformationsquelleAutor der Antwort user3657756

Beste Lösung:

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

Läuft perfekt auf allen Browsern

InformationsquelleAutor der Antwort Rafa Baldayo