Comment faire pour que Internet Explorer émule des événements de pointeur: aucun?

Je travaille sur un projet où nous améliorons les diagrammes élevés en affichant un PNG dégradé sur les tableaux. Nous utilisons CSS pointer-events:none; Pour permettre aux utilisateurs d'interagir avec le tableau, même s'il existe une division divisée sur le dessus. IE ne reconnaît pas les pointer-events:none; , De sorte que les utilisateurs sur IE ne peuvent pas avoir une conception de graphique améliorée ou ne peuvent pas interagir avec les graphiques. Je cherche un moyen d'obtenir un IE pour permettre aux événements de la souris (événements spécifiques spécifiques) de passer par une div aux éléments ci-dessous.

Vous pouvez voir un modèle de ce dont nous travaillons ici: http://jsfiddle.net/PFKEM/2/

Existe-t-il un moyen d'amener IE à faire quelque chose comme des pointer events:none; , Où les événements de souris traversent un élément pour que les éléments les soufflent?

J'espère que cela t'aides 🙂

http://www.vinylfox.com/forwarding-mouse-events-through-layers/

Vous pouvez également essayer une solution javascript:

http://jsbin.com/uhuto

L'Internet Explorer reconnaît les événements du pointeur: aucun , mais seulement pour les éléments SVG car les événements-pointeurs ne sont spécifiés que pour les éléments SVG dans la spécification W3C ( http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty ).

Vous pouvez l'essayer avec quelque chose comme ça …

CSS:

 #tryToClickMe{ pointer-events: none; width: 400px; height: 400px; background-color: red; }

HTML:

 <svg id="tryToClickMe"></svg>

Cela fonctionne dans IE9 et IE10 (je l'ai testé). Si vous n'utilisez pas encore d'éléments SVG, il est possible d'envelopper vos éléments existants dans un SVG. La bibliothèque jQuery fournit une méthode d'enveloppement pour cela ( http://api.jquery.com/wrap/ ).

Il y a un très bon article allemand qui a dégradé les caractéristiques de la propriété des événements du pointeur: http://www.bennyn.de/programmierung/html/unterschiedliche-implementierungen-der-eigenschaft-pointer-events.html – Vous y trouverez Trouver (avec l'aide de Google Translate) plus d'informations.

J'espère pouvoir aider

Benny

PS Si vous souhaitez accéder aux objets sous-jacents et sous-jacents, vous pouvez utiliser la méthode document.msElementsFromPoint dans IE ( http://msdn.microsoft.com/de-DE/library/windows/apps/hh465811.aspx ). Il vous donnera toutes les couches sur un point donné dans un tableau.

Juste passé deux jours à faire des recherches pour un projet IE10 (IE10 ne prend pas en charge les événements pointeurs: aucune propriété CSS, MS a voté pour le retrait de la spécification en raison des éventuels problèmes de clic). La solution de contournement consiste à avoir une balise SVG INCLINE et à définir des événements de pointeur dans SVG. J'ai continué à essayer d'utiliser par exemple une balise IMG avec SVG src, ou un DIV avec image d'arrière-plan réglé sur un fichier SVG (où j'utiliserais pointer-events = "none"), même SVG data-uris, Je me trouve que le fait d'avoir dans un élément distinct requiert précisément la propriété CSS des événements de pointeur non implémentée.

Donc, vous avez besoin d'un SVG bare-bones comme ça: d'abord, certains CSS, par exemple:

  .squareBottomRight { width: 50px; height: 50px; position: absolute; bottom: 0; right: 0; }

Et puis en HTML:

  <svg class="squareBottomRight" xmlns="http://www.w3.org/2000/svg" pointer-events="none"> <rect id="test2_rect" x="0" y="0" width="50" height="50" fill="blue"/> </svg>

Référence: https://bug-45467-attachments.webkit.org/attachment.cgi?id=67050

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

Capturez l'événement 'mousedown' pour l'élément supérieur (l'élément que vous voulez désactiver les événements du pointeur).
Dans le «mousedown», cachez l'élément supérieur.
Utilisez 'document.elementFromPoint ()' pour obtenir l'élément sous-jacent.
Représentez l'élément supérieur.
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; });

 $.fn.passThrough = function (target) { var $target = $(target); return this.each(function () { var style = this.style; if ('pointerEvents' in style) { style.pointerEvents = style.userSelect = style.touchCallout = 'none'; } else { $(this).on('click tap mousedown mouseup mouseenter mouseleave', function (e) { $target.each(function() { var rect = this.getBoundingClientRect(); if (e.pageX > rect.left && e.pageX < rect.right && e.pageY > rect.top && e.pageY < rect.bottom) $(this).trigger(e.type); }); }); } }); };

http://jsfiddle.net/yckart/BQw4U/

 $('.overlay').passThrough('.box'); $('.box').click(function(){ $(this).toggleClass('active'); });

CSS:

 #red_silk { width:100%; background: url('../img/red_silk.png') no-repeat center top; height:393px; z-index: 2; position: absolute; pointer-events: none; }

VIEUX HTML:

 <div id="red_silk"></div>

NOUVEAU HTML:

 <svg id="red_silk"></svg>

L'ajout du CSS suivant désactivera les pointeurs ms.

 #container{ -ms-touch-action: none; }