Comment faire en sorte qu'Internet Explorer émule pointer-events:none ?

Question

Je travaille sur un projet où nous améliorons les highcharts en affichant un dégradé PNG sur les graphiques. Nous utilisons CSS pointer-events:none; pour permettre aux utilisateurs d'interagir avec le graphique malgré la présence d'une div superposée. IE ne reconnaît pas pointer-events:none;, donc les utilisateurs sur IE ne peuvent pas avoir un design de graphique amélioré, ou ne peuvent pas interagir avec les graphiques. Je cherche un moyen de faire en sorte qu'IE permette aux événements de souris (en particulier les événements de survol) de passer à travers une div pour atteindre les éléments en dessous.

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

Existe-t-il un moyen de faire quelque chose de similaire pour IE pointer-events:none;, où les événements de souris passent à travers un élément pour atteindre les éléments en dessous?

Answer 1

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

Vous pouvez essayer quelque chose comme ceci...

CSS:

#tryToClickMe{

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

HTML:

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 wrap à cet effet (http://api.jquery.com/wrap/).

Il existe un très bon article en allemand qui a décortiqué les caractéristiques de la propriété pointer-events : http://www.bennyn.de/programmierung/html/unterschiedliche-implementierungen-der-eigenschaft-pointer-events.html - Vous y trouverez (avec l'aide de Google Traduction) plus d'informations.

J'espère avoir pu vous aider

Benny

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

Answer 2

Vient de passer deux jours à rechercher cela pour un projet IE10 (IE10 ne prend pas en charge la propriété CSS pointer-events: none, MS a voté en faveur du retrait de la spécification en raison de possibles problèmes de clickjacking). La solution de contournement consiste à avoir une balise SVG EMBARQUÉE et à définir pointer-events dans SVG. J'ai continué d'essayer d'utiliser par exemple une balise IMG avec src SVG, ou un DIV avec une image d'arrière-plan définie sur un fichier SVG (où j'utiliserais pointer-events="none"), même des data-uris SVG, mais il ne m'est pas venu à l'esprit que le fait de l'avoir dans un élément séparé nécessitait précisément la propriété CSS pointer-events non implémentée.

Vous avez donc besoin d'un SVG minimaliste comme celui-ci : Tout d'abord un peu de CSS par exemple :

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

Et ensuite en HTML :

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

Answer 3

J'espère que cela vous aidera :)

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

Vous pouvez également essayer une solution en javascript :

http://jsbin.com/uhuto

Answer 4

Voici une autre solution qui est 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 sur lequel vous voulez désactiver les événements pointeur).
2. Dans le 'mousedown', masquez l'élément supérieur.
3. Utilisez 'document.elementFromPoint()' pour obtenir l'élément sous-jacent.
4. Affichez à nouveau l'élément supérieur.
5. Exécutez 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 5

$.fn.passThrough = function (cible) {
    var $cible = $(cible);
    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) {
                $cible.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');
});