“pointer-events: none” ne fonctionne pas dans IE9 et IE10

Le CSS - propriété pointer-events: none;
fonctionne très bien sous Firefox, mais il n'est pas dans Internet Explorer 9 et 10.

Est-il possible d'obtenir le même comportement de cette propriété dans IE? Des idées?

  • Si votre intention est d'empêcher l'utilisateur de cliquer n'importe où sur la page pendant un appel ajax, vous pouvez utiliser: $('body').css({'curseur':'attendre'});, et lorsque vous voulez retourner à la normale de l'état de curseur, utilisez: $('body').css({'curseur':'par défaut'});
  • Fév. 2017: pour info il fonctionne sur IE11.
InformationsquelleAutor Vova Potapov | 2013-07-03
  1. 21

    Du MDN docs:

    Avertissement: L'utilisation de pointeur-événements dans le CSS pour les non-éléments SVG est expérimental. La fonction utilisée pour faire partie de la CSS3 UI projet de spécification, mais, en raison des nombreuses questions en suspens, a été reportée à CSS4.

    Lire la suite ici, fondamentalement, pointer-events sur un non-SVG (Scalable Vector Graphic) est non-standard.

    Si vous cochez la prise en charge du navigateur tableau de la page liée (environ deux tiers), vous remarquerez que IE appuyer sur la non-svg est ziltsh, jack squat, naut,... pas pris en charge, ce qui est.

    Après quelques recherches, je n'ai trouver cet article qui ne vous permettent d'imiter les comportements par le biais de l'utilisation de couches, et , grâce à ce post, j'ai trouvé ce JS-bin Qui pourraient t'aider...

    Toutefois, dans IE (et de l'Opéra, et autant que je sache, tous les navigateurs), vous pourriez simplement forcer un type de curseur sur un élément:

    a, a:hover, a:visited, a:active, a:focus /*, * <-- add all tags?*/
{
    cursor: default;/*plain arrow*/
    text-decoration: none;/*No underline or something*/
    color: #07C;/*Default link colour*/
}

    Le résultat devrait être assez similaire à celle de pointer-events: none;

    Mise à jour:

    Si vous souhaitez empêcher les événements de clic dans IE qui, comme shasi souligné, est prévue dans les autres navigateurs, il suffit d'ajouter un écouteur d'événement que les délégués de l'événement click.

    Je vais assumer, à l'instant, que vous ciblez tous les a éléments:

    var handler = function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'a')
    {
        if (!e.preventDefault)
        {//IE quirks
            e.returnValue = false;
            e.cancelBubble = true;
        }
        e.preventDefault();
        e.stopPropagation();
    }
};
if (window.addEventListener)
    window.addEventListener('click', handler, false);
else
    window.attachEvent('onclick', handler);

    Ce qui devrait éviter tous les événements de clic sur les éléments d'ancrage.

    • Mais cela ne vous empêche pas d'événement de clic sur le lien dans IE.
    • Cette question est au sujet de la CSS pointeur de la règle d'événement. CSS ne vous empêche pas de cliquez sur événements
    • Non, la règle CSS "pointer-events: none;" n'empêche l'événement de clic sur un élément, dans Firefox, & Chrome. Il ne fonctionne pas dans IE bien. Voici une Démo
    • Ajouté un petit bout de code JS prend soin des affaires
    • Ce n'est pas le même que pointer-events: none. Si il y a un élément cliquable sous le <a>, il ne recevra pas l'événement click. Si le <a> a pointer-events: none, l'élément sous-jacent serait de recevoir l'événement.
    • a un point important. J'ai besoin d'un polyfill qui va envoyer le clic pour tout les éléments relevant de l'élément cliqué (voir ici: stackoverflow.com/questions/1009753/...). Quelqu'un connais une solution?

    InformationsquelleAutor Elias Van Ootegem
  2. 5

    De la recherche à l'Api, je ne pense pas que les Riches Harris Points.js ni Hands.js, de fournir un soutien pour pointeur-events: none.

    Donc, j'ai juste mis en place un petit script de polyfill de cette fonctionnalité:

    • Les événements de pointeur de l'API n'est pas le même que le pointeur d'événements de la propriété CSS.
    • Cette polyfill ne fonctionne pas dans IE10. J'ai testé sur bing maps
    • Pourquoi besoin de jQuery pour un polyfill?!
    InformationsquelleAutor Kent Mewhort
  3. 4

    De merde IE10, il y a une autre solution, par exemple : 

    /* must be over the element that have the action */

.action-container:after {
    content: ' ';
    position: absolute;
    width: 100%; 
    height: 100%;
    top: 0;
    left: 0;
    z-index: 250; 
    background-color: grey; /* must have a color on ie10, if not :after does not exist... */
    opacity: 0;
}
    • Génial de secours suggestion! Merci 🙂
    InformationsquelleAutor artde