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


155

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?


2
Existe-t-il un moyen d'accéder au HTML et aux scripts? Essayez de parler à celui qui vous a confié la tâche.
Kyle

@Kyle Ce n'est pas exactement un problème de privilège, il y a aussi quelques difficultés techniques pour modifier le code html / javascript
anupam



3
Notez que pointer-eventsc'est maintenant dans IE11 +
David Storey

Réponses:


88

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.


4
La documentation de ie9 dit qu'elle prend en charge cette propriété (je n'ai pas encore essayé ie9 cependant). Quoi qu'il en soit, j'avais déjà des idées dans mon esprit qui sont données dans les liens mais comme je cherchais une solution spécifique css, je ne peux pas les utiliser. Je vais essayer de modifier le code html / js plutôt que de passer du temps sur ce problème.Merci beaucoup pour votre temps et votre aide
anupam

11
Au W3C, cette question a fait l' objet d'un débat en raison du détournement de clics . Règle de base: dès que le W3C publiera la recommandation du candidat, l'équipe IE la mettra en œuvre et il y a toujours une leçon sur la hâte fait du gaspillage . En outre, Mozilla a tout dit " Attention: l'utilisation d'événements de pointeur dans CSS pour les éléments non SVG est expérimentale. La fonctionnalité faisait partie du projet de spécification de l'interface utilisateur CSS3 mais, en raison de nombreux problèmes ouverts, a été reportée à CSS4 . "
Vulcan Raven

8
Selon caniuse.com, les événements de pointeur CSS arrivent dans IE 11. caniuse.com/#feat=pointer-events
Tim

4
Ce n'est pas une raison pour voter contre une réponse @eyurdakul
scumah

14
"you can't expect to see it in IE browsers for another million years."Cela n'a pris que 3 ans ...
ProblemsOfSumit

20

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;

});

2
Cela a fonctionné pour moi. Je préfère les petites corrections que je peux mettre dans mon code js au lieu d'ajouter beaucoup de polyfills;)
dippas

C'est une solution créative, j'aime ça. Le seul problème est ce qui ajoute un traitement inutile aux navigateurs où les points-événements font le travail. Ce serait formidable de faire en sorte que cela n'exécute que des navigateurs IE conditionnels.
Trevor

Je suis d'accord, c'est une mise en œuvre rapide à un problème déroutant, mais en fait, dans ma mise en œuvre de celui-ci, je ne l'applique que si le navigateur est IE, vous le placez dans cette vérification: if (navigator.appName == 'Microsoft Internet Explorer' ) {... la logique va ici ..}
MarzSocks

3
cela fonctionne très bien! puisque ie 11 a supposément commencé à prendre en charge les événements de pointeur, je l'enveloppe simplement dans cette clause: if (navigator.userAgent.toLowerCase (). indexOf ('msie')> 0) MERCI!
Hank


10

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"


1
Cela n'a pas fonctionné pour moi. Dans IE9-10, les fonctions onclick sont toujours exécutées.
Certainement le


4

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.


1
J'ai utilisé une idée similaire avec l'attribut désactivé. Dans IE, l'ajout de l'attribut désactivé empêche les événements de clic, mais s'il y a des enfants, ils déclenchent toujours le clic. couvrir les enfants pour qu'ils ne soient pas cliquables est une excellente solution à cela. J'ai dû utiliser une couleur d'arrière-plan avec l'opacité 0 pour que IE enregistre un élément réel.
Blake Plumb

4

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.


1

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.



0

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.


0

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


-1

Meilleure solution:

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

Fonctionne parfaitement sur tous les navigateurs


3
Sauf pour la version IE <11, où les événements de pointeur ne sont pas pris en charge. Je pense que vous n'avez pas saisi mon argument.
prison-mike
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.