Comment émuler les « événements de pointeur : aucun » dans Internet Explorer ?

Émulation d'événements de pointeur : aucun dans Internet Explorer

Dans un projet impliquant l'amélioration de Highcharts, un besoin s'est fait sentir pour afficher un PNG dégradé au fil des graphiques. Utilisation de la propriété CSS pointer-events : aucun ne permettrait aux utilisateurs d'interagir avec le graphique malgré le div superposé. Cependant, cette propriété n'est pas reconnue par Internet Explorer.

Comment activer la fonctionnalité de type pointeur-événement dans IE ?

Alors que pointer-events: none n'est pas directement pris en charge dans Internet Explorer, le navigateur prend en charge les événements de pointeur pour les éléments SVG, comme spécifié par le W3C. Cela signifie que vous pouvez utiliser des éléments SVG pour obtenir des fonctionnalités similaires :

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

<svg>

Avec cette approche, les événements de souris passeront par l'élément SVG vers les éléments sous-jacents. Vous pouvez améliorer davantage cette fonctionnalité en encapsulant des éléments existants dans un SVG à l'aide de la méthode jQuery wrap().

Solution alternative pour accéder aux objets sus-jacents et sous-jacents

Si vous en avez besoin pour accéder aux objets sus-jacents et sous-jacents, vous pouvez utiliser la méthode document.msElementsFromPoint disponible dans IE. Cette méthode renvoie un tableau de toutes les couches sur un point donné, vous permettant d'interagir avec les deux éléments accessibles.

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!