Css 'propriété "pointer-events" alternative pour IE

Question

J'ai un menu de navigation déroulant dans lequel certains titres ne doivent pas naviguer vers une autre page lorsqu'ils sont cliqués (ces titres ouvrent un menu déroulant lorsqu'ils sont cliqués), tandis que d'autres doivent naviguer (ceux-ci n'ont pas de menu déroulant et naviguent directement). Cependant, les deux types ont un href défini sur eux

Pour résoudre cela, j'ai ajouté le CSS suivant pour le premier type de titres

pointer-events: none;

et cela fonctionne bien. Mais comme cette propriété n'est pas prise en charge par IE, je recherche une solution de contournement. Le problème ennuyeux est que je n'ai pas accès ni le privilège de modifier complètement le code HTML et JavaScript.

Des idées?

Answer 1

Pointer-events est un hack de Mozilla et là où il a été implémenté dans les navigateurs Webkit, vous ne pouvez pas vous attendre à le voir dans les navigateurs IE avant un million d'années.

Cependant, j'ai trouvé une solution:

Transférer les événements de la souris à travers les couches

Cela utilise un plugin qui utilise certaines propriétés de Javascript peu connues / mal comprises pour prendre l'événement de la souris et l'envoyer à un autre élément.

Il y a aussi une autre solution Javascript ici.

Mise à jour pour octobre 2013 : apparemment, cela arrive à IE dans la v11. Source. Merci Tim.

Answer 2

Voici une autre solution très facile à implémenter avec 5 lignes de code :

1. Capturer l'événement 'mousedown' pour l'élément supérieur (l'élément sur lequel vous voulez désactiver les événements de pointeur).
2. Dans le 'mousedown', masquer l'élément supérieur.
3. Utiliser 'document.elementFromPoint()' pour obtenir l'élément sous-jacent.
4. Afficher à nouveau l'élément supérieur.
5. Exécuter l'événement souhaité pour l'élément sous-jacent.

Exemple :

// Ceci est une correction pour IE car pointer-events ne fonctionne pas dans IE
$(document).on('mousedown', '.TopElement', function (e) {

    $(this).hide();
    var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
    $(this).show();
    $(BottomElement).mousedown(); // Déclencher manuellement l'événement pour l'élément sous-jacent souhaité

    return false;

});

Answer 3

Il existe une solution de contournement pour IE - utilisez SVG en ligne et définissez pointer-events="none" dans SVG. Voir ma réponse dans Comment faire en sorte qu'Internet Explorer émule pointer-events:none?

Answer 4

Il convient de mentionner qu'en particulier pour IE, disabled=disabled fonctionne pour les balises d'ancrage :

Contact

IE considère cela comme un élément désactivé et ne déclenche pas l'événement de clic. Cependant, désactivé n'est pas un attribut valide pour une balise d'ancrage. Par conséquent, cela ne fonctionnera pas dans d'autres navigateurs. Pour eux, pointer-events:none est requis dans le style.

MISE À JOUR 1 : Ainsi, ajouter la règle suivante me semble être une solution compatible avec tous les navigateurs

MISE À JOUR 2 : Pour une compatibilité supplémentaire, parce qu'IE ne formera pas de styles pour les balises d'ancrage avec disabled='disabled', elles resteront toujours actives. Ainsi, la règle a:hover{} et le style sont une bonne idée :

a[disabled="disabled"] {
        pointer-events: none; /* cela suffit pour les navigateurs non-IE */
        color: darkgrey;      /* IE */
    }
        /* IE - désactiver les effets de survol */
        a[disabled="disabled"]:hover {
            cursor:default;
            color: darkgrey;
            text-decoration:none;
        }

Fonctionne sur Chrome, IE11, et IE8.
Bien entendu, le CSS ci-dessus suppose que les balises d'ancrage sont rendues avec disabled="disabled"

Answer 5

Voici un petit script implémentant cette fonctionnalité (inspiré par l'article de blog de Shea Frederick mentionné par Kyle) :

• Polyfill d'événements de pointage.