Comment puis-je émuler « pointer-events : none » dans Internet Explorer pour les éléments non SVG ?

L'émulation de pointer-events:none dans Internet Explorer

Internet Explorer pose un défi lors de l'utilisation de la propriété CSS pointer-events:none pour autoriser interaction de l'utilisateur avec des éléments en couches. Cette propriété, utilisée pour ignorer les événements de souris pour des éléments spécifiques, n'est reconnue par IE que pour les éléments SVG.

Surmonter la limitation

Malgré cette limitation, IE propose une solution alternative. En encapsulant les éléments existants dans un élément SVG, vous pouvez conserver la fonctionnalité souhaitée. La méthode wrap de jQuery peut simplifier ce processus.

Exemple

Supposons que vous souhaitiez recouvrir un graphique avec un dégradé PNG et conserver l'interactivité du graphique. Vous pouvez implémenter cela en utilisant le code suivant :

**CSS:**

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

**HTML:**

<svg>

Accès aux objets sus-jacents et sous-jacents

Si vous devez interagir avec des éléments situés sous la superposition SVG, envisagez d'utiliser le méthode document.msElementsFromPoint dans IE. Cette méthode fournit un tableau de toutes les couches sur un point spécifié.

Conclusion

Bien que pointer-events:none ne soit pas pris en charge nativement dans IE, en utilisant les éléments SVG et le La méthode document.msElementsFromPoint fournit une solution complète, permettant aux utilisateurs d'interagir avec les graphiques et de conserver une conception améliorée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!