web-dev-qa-db-de.com

css 'pointer-events' Eigenschaftsalternative für IE

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

Um dieses Problem zu lösen, habe ich das folgende CSS für den früheren Typ von Titeln hinzugefügt

pointer-events: none;

und es funktioniert gut. Aber da diese Eigenschaft nicht vom Internet Explorer unterstützt wird, suche ich nach einem Workaround. Das Ärgerliche ist, dass ich habe keinen Zugriff und keine Berechtigung, den HTML- und JavaScript-Code zu ändern vollständig.

Irgendwelche Ideen?

154
anu

Zeigerereignisse sind ein Mozilla-Hack, und wo er in Webkit-Browsern implementiert wurde, können Sie nicht erwarten, dass er in IE) Browsern für eine weitere Million Jahre verwendet wird.

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

Weiterleiten von Mausereignissen durch Ebenen

Hierbei wird ein Plugin verwendet, das einige nicht bekannte/verstandene Eigenschaften von Javascript verwendet, um das Mausereignis zu erfassen und an ein anderes Element zu senden.

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

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

86
Kyle

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

  1. Erfassen Sie das Ereignis 'mousedown' für das oberste Element (das Element, das Zeigerereignisse deaktivieren soll).
  2. Verstecken Sie in der 'Maus' das obere Element.
  3. Verwenden Sie 'document.elementFromPoint ()', um das zugrunde liegende Element abzurufen.
  4. Blenden Sie das obere 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;

});
19
MarzSocks

Es gibt eine Problemumgehung für IE - verwende Inline-SVG und setze Zeigerereignisse = "keine" in SVG. Siehe meine Antwort in Wie lässt man Internet Explorer Zeigerereignisse emulieren: keine?

17
obiuquido144

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

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

IE behandelt dies als disabled -Element und löst kein Klickereignis aus. disabled ist jedoch kein gültiges Attribut für ein Ankertag. Daher funktioniert dies in anderen Browsern nicht. Für Sie pointer-events:none wird im Styling benötigt.

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

PDATE 2: Zur weiteren Kompatibilität, da IE keine Stile für Ankertags mit disabled='disabled', so werden sie immer noch aussehen aktiv. So ist 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 in Chrome, IE11 und IE8.
In der obigen CSS-Version wird natürlich davon ausgegangen, dass Ankertags mit disabled="disabled"

9
Nikhil

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

6
Kent Mewhort

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

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

Sie landen also auf dem übergeordneten Element. Nicht gut, wenn der Elternteil anklickbar ist, aber ansonsten gut funktioniert.

4
Graham P Heath

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

Dies verwendet Javascript und JQuery.

(GitHub) pointer_events_polyfill

Hierfür kann ein Javascript-Plug-In zum Herunterladen/Kopieren verwendet werden. Kopieren Sie einfach die Codes von dieser Site, laden Sie sie herunter und speichern Sie sie als pointer_events_polyfill.js. Schließen Sie dieses Javascript zu Ihrer Site ein.

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

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

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

Und vergessen Sie nicht, Ihr JQuery-Plug-In einzuschließen.

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

BEARBEITEN: Diese 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.

4
Mai

Ich habe eine andere Lösung gefunden, um dieses Problem zu lösen. Ich verwende jQuery, um das href- Attribut auf javascript:; Zu setzen (nicht '', oder der Browser lädt die Seite neu), wenn das Browserfenster breiter 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 dich.

1
yves.beutler

Sie können auch einfach "keine" URL in das <a> - Tag einfügen. Dies gilt auch für Menüs, deren <a> - Tag ebenfalls mit Dropdowns gesteuert wird. 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.

0
user3657756

Verwenden OnClientClick = "return false;"

0
Medde

Ich hatte mit ähnlichen Problemen zu kämpfen:

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

  2. Die obige Korrektur funktionierte nicht für das ausgewählte Tag, dann fügte ich Cursor: Text (was ich wollte) hinzu und es funktionierte für mich

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

0
Z.T