Comment rendre un Div insensible aux clics avec les événements de pointeur CSS ?

Événements de pointeur CSS : rendre un div insensible aux clics

Lors de la mise en œuvre d'un div de superposition transparent, il devient difficile d'interagir avec le sous-jacent éléments, car la superposition intercepte les clics et autres événements de souris. Pour résoudre ce problème, la propriété CSS pointer-events peut être utilisée.

Comprendre les événements de pointeur

La propriété pointer-events contrôle la manière dont un élément particulier répond aux entrées de l'utilisateur. . Définition des événements de pointeur : aucun ; sur un élément le rend invisible aux événements de la souris tout en laissant son apparence visuelle intacte.

Mise en œuvre de la solution

Considérons l'exemple suivant :

<code class="html"><div id="container">
    <p>Some text</p>
    <div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%">
        ... some content ...
    </div>
</div></code>

Pour rendre le div #overlay invisible aux clics, nous pouvons ajouter la règle CSS suivante :

<code class="css">#overlay {
  pointer-events: none;
}</code>

Désormais, les clics de souris et autres événements passeront par le div overlay sans déclencher d'interactions.

Prise en charge des navigateurs

pointer-events est pris en charge dans les navigateurs modernes :

• Firefox 3.6
• Chrome 2
• IE 11
• Safari 4

Solution de contournement multi-navigateurs

Malheureusement, il n'existe aucune solution de contournement multi-navigateurs connue pour les événements de pointeur.

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!