web-dev-qa-db-fra.com

css 'alternative de 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 lorsqu'on clique dessus (ces titres ouvrent un menu déroulant lorsque l'on clique dessus), tandis que d'autres doivent naviguer (celles-ci n'ont pas de liste déroulante et naviguent directement) .Cependant, les deux les types ont href définis pour eux

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

pointer-events: none;

et cela fonctionne bien. Mais comme cette propriété n’est pas supportée par IE, je cherche un moyen de contourner le problème. La chose ennuyante est que je n'ai pas d'accès et le privilège de changer le code HTML et JavaScript complètement.

Des idées?

htmlcssinternet-explorerbrowsercross-browser
154
anu

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

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

Transfert d'événements de souris à travers des calques

Ceci utilise un plugin qui utilise des propriétés de Javascript pas bien connues/comprises pour prendre l'événement de la souris et l'envoyer à un autre élément.

Il existe également une autre solution Javascript here .

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

86
Kyle

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

  1. Capturez l'événement 'mousedown' pour l'élément supérieur (l'élément pour lequel vous souhaitez désactiver les événements de pointeur).
  2. Dans le "mousedown" masquer l'élément supérieur.
  3. Utilisez 'document.elementFromPoint ()' pour obtenir l'élément sous-jacent.
  4. Afficher 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;

});
19
MarzSocks

Il existe une solution de contournement pour IE: utilisez SVG en ligne et définissez pointer-events = "none" en SVG. Voir ma réponse dans Comment faire pour Internet Explorer émuler des événements de pointeur: aucun?

17
obiuquido144

Il vaut la peine de mentionner que spécifiquement pour IE, disabled=disabled fonctionne pour les balises d'ancrage:

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

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

PDATE 1: L'ajout de la règle suivante est donc pour moi une solution multi-navigateurs

PDATE 2: Pour plus de compatibilité, parce que IE ne formera pas de styles pour les balises d'ancrage avec disabled='disabled', ils seront donc toujours regardez actif. Ainsi, la règle et le style a:hover{} 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;
        }

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

9
Nikhil

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

6
Kent Mewhort

Couvrez les éléments incriminés avec un bloc invisible, en utilisant un pseudo-élément: :before ou :after

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

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

4
Graham P Heath

J'ai passé presque 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 pour être téléchargé/copié. Il suffit de copier/télécharger les codes de ce site et de l’enregistrer sous le nom pointer_events_polyfill.js. Inclure ce javascript sur votre site.

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

Ajouter 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 inférieur.

EDIT: L'utilisation de cette solution ne fonctionne pas lorsque vous cliquez sur les zones de texte situées 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.

4
Mai

J'ai trouvé une autre solution pour résoudre ce problème. J'utilise jQuery pour définir l'attribut href- sur javascript:; (pas '', sinon 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.

1
yves.beutler

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

0
user3657756

Utilisez OnClientClick = "return false;"

0
Medde

J'ai rencontré des problèmes similaires:

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

  2. Le correctif ci-dessus ne fonctionnait pas pour les balises de sélection, puis j’ai ajouté curseur: texte (ce qui était ce que je voulais) et cela a fonctionné pour moi

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

0
Z.T