css alternative à la propriété 'pointer-events' pour IE

J'ai un menu de navigation déroulant dans lequel une partie du titre ne doit pas naviguer vers une autre page lorsque vous cliquez dessus (ces titres ouvrent un menu déroulant lorsque vous cliquez dessus) tandis que d'autres devraient naviguer (ceux-ci n'ont pas de liste déroulante et naviguent directement) .Cependant, les deux types leur ont hrefdéfini

Pour résoudre ce problème, j'ai ajouté le css suivant pour l'ancien type de titres

pointer-events: none;

et cela fonctionne très bien.Mais puisque cette propriété n'est pas prise en charge par IE, je recherche une solution de rechange. Ce qui est ennuyeux, c'est que je n'ai pas accès et le privilège de changer complètement le code HTML et JavaScript .

Des idées?

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 pendant encore un million d'années.

Il y a cependant une solution que j'ai trouvée:

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

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

Il existe également une autre solution Javascript ici .

Mise à jour d'octobre 2013 : apparemment, il arrive sur IE en v11. Source . Merci Tim.

Voici une autre solution très simple à mettre en œuvre avec 5 lignes de code:

1. Capturez l'événement 'mousedown' pour l'élément supérieur (l'élément dont vous souhaitez désactiver les événements de pointeur).
2. Dans le "mousedown", cachez l'élément supérieur.
3. Utilisez 'document.elementFromPoint ()' pour obtenir l'élément sous-jacent.
4. Affichez l'élément supérieur.
5. Exécutez l'événement souhaité pour l'élément sous-jacent.

Exemple:

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

});

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 pour qu'Internet Explorer émule des événements de pointeur: aucun?

Il convient de mentionner que spécifiquement pour IE, disabled=disabledfonctionne pour les balises d'ancrage:

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

IE traite cela comme un disabledélément et ne déclenche pas d'événement de clic. Cependant, ce disabledn'est pas un attribut valide sur une balise d'ancrage. Par conséquent, cela ne fonctionnera pas dans d'autres navigateurs. Pour eux pointer-events:noneest nécessaire dans le style.

MISE À JOUR 1 : L'ajout de la règle suivante me semble donc être une solution multi-navigateurs

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

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

Travaille sur Chrome, IE11 et IE8.
Bien sûr, le CSS ci-dessus suppose que les balises d'ancrage sont rendues avecdisabled="disabled"

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

• Événements de pointeur Polyfill .

Recouvrez les éléments incriminés d'un bloc invisible, à l'aide d'un pseudo élément: :beforeou:after

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

Ainsi, vous cliquez sur les terres sur l'élément parent. Pas bon, si le parent est cliquable, mais fonctionne bien autrement.

J'ai passé près de deux jours à trouver la solution à ce problème et je l'ai enfin trouvée.

Cela utilise javascript et jquery.

(GitHub) pointer_events_polyfill

Cela pourrait utiliser un plug-in javascript à télécharger / copier. Copiez / téléchargez simplement les codes de ce site et enregistrez-les sous pointer_events_polyfill.js. Incluez ce javascript sur votre site.

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

Ajoutez ces scripts jquery à votre site

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

Et n'oubliez pas d'inclure votre plug-in jquery.

Ça marche! Je peux cliquer sur des éléments sous l'élément transparent. J'utilise IE 10. J'espère que cela peut également fonctionner dans IE 9 et ci-dessous.

EDIT: l' utilisation de cette solution ne fonctionne pas lorsque vous cliquez sur les zones de texte sous l'élément transparent. Pour résoudre ce problème, j'utilise le focus lorsque l'utilisateur clique sur la zone de texte.

Javascript:

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

JQuery:

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

Cela vous permet de taper le texte dans la zone de texte.

J'ai trouvé une autre solution pour résoudre ce problème. J'utilise jQuery pour définir l' hrefattribut sur javascript:;(pas '', ou le navigateur rechargera la page) si la largeur de la fenêtre du navigateur est supérieure à 1'000px. Vous devez ajouter un identifiant à votre lien. Voici ce que je fais:

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

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

C'est peut-être utile pour vous.

Utilisation OnClientClick = "return false;"

Vous pouvez également simplement "ne pas" ajouter une URL à l'intérieur de la <a>balise, je le fais pour les menus qui sont <a>pilotés par des balises avec des menus déroulants. S'il n'y a pas de liste déroulante, j'ajoute l'URL, mais s'il y a des <ul> <li>listes déroulantes avec une liste, je la supprime simplement.

J'ai rencontré des problèmes similaires:

1. J'ai rencontré ce problème dans une directive, je l'ai corrigé en ajoutant a comme élément parent et en créant des événements de pointeur: aucun pour cela

2. Le correctif ci-dessus n'a pas fonctionné pour la balise select, puis j'ai ajouté le curseur: texte (ce que je voulais) et cela a fonctionné pour moi

Si un curseur normal est nécessaire, vous pouvez ajouter un curseur: par défaut

Meilleure solution:

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

Fonctionne parfaitement sur tous les navigateurs