web-dev-qa-db-fra.com

Comment faire pour qu'Internet Explorer émule les événements de pointeur: aucun?

Je travaille sur un projet où nous améliorons les graphiques 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'un div en couches sur le dessus. IE ne reconnaît pas pointer-events:none;, donc les utilisateurs sur IE ne peuvent pas avoir une conception graphique améliorée, ou ne peuvent pas interagir avec les graphiques. Je cherche un moyen d'obtenir IE pour permettre aux événements de la souris (en particulier les événements de survol), de passer à travers un div aux éléments en dessous.

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

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

javascripthtmlcssinternet-explorercross-browser
40
Code Junkie

Internet Explorer reconnaît les événements de pointeur: aucun , mais uniquement pour les éléments SVG car les événements de pointeur 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 de bouclage pour cela ( http://api.jquery.com/wrap/ ).

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

J'espère que je pourrais aider

Benny

P.S. 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.

37
Benny Neugebauer

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

Vous avez donc besoin d'un SVG à nu comme celui-ci: d'abord du 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=6705

24
obiuquido144

Voici une autre solution très simple à 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", 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;

        });
6
MarzSocks
$.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');
});
4
yckart

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>
2
Vladimir