recherche
Maisoninterface Webtutoriel CSSExplication détaillée de l'utilisation de l'attribut CSS pointer-events

Cet article présente principalement l'utilisation des attributs CSS pointer-events. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans le développement front-end, nous sommes en contact direct avec les utilisateurs. Nous devons faire de notre mieux pour que les utilisateurs se sentent à l'aise et agréables à utiliser, et obtiennent une sensation de natif. L'animation est la méthode la plus couramment utilisée.

L'exigence ici est la conception de la couche élastique. Cette couche élastique espère être comme la couche élastique du natif. Elle apparaît lorsque vous cliquez sur le bouton, se ferme lorsque vous cliquez sur le masque ou le bouton, et a. effets d'animation lors de son apparition et de sa fermeture (fondu, glissement, etc.).

Problème

Lors de la fermeture du calque contextuel, prenez l'effet d'animation fadeOut comme exemple . Voici Utiliser le processus d'opacité de 1 -> 0 pour simuler le processus d'animation qui disparaît progressivement. Le conteneur est le conteneur le plus externe du composant de la couche élastique :

.container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    animation: .5s fadeOut forwards;
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

Le problème est que lorsque l'opacité est de 0. , seuls les éléments du conteneur sont transparents et invisibles, le conteneur existe toujours dans le nœud dom. Lorsque nous lions un événement close au masque du calque élastique, puisque le z-index du conteneur est très grand, l'événement click sera déclenché sur le masque.

Événements de fin de transition et de fin d'animation

Afin de résoudre les problèmes ci-dessus et d'améliorer l'expérience utilisateur, nous pouvons écouter les événements de fin de transition et de fin d'animation et d'autres effets d'animation avant exécution du conteneur Node masqué (affichage : aucun). De cette façon, il n’y aura aucun problème d’interception des événements de clic par le masque.

Introduction

En utilisant les effets d'animation générés par la technologie CSS, nous pouvons capturer les événements de fin d'animation ou de transformation en JS : les événements de transitionend et d'animationend sont des événements standard du navigateur. L'événement transitionend sera déclenché après la fin de la transition CSS. L'événement

animationend est déclenché lorsqu'une animation CSS se termine (à l'exclusion des cas où elle s'est terminée avant la fin, comme lorsque l'élément est devenu invisible ou que l'animation a été supprimée de l'élément).

Exemple de code :

/*
 * 在container元素上监听transitionend事件
 * 然后指定一个函数, 例如 showMessage()
 */
function showMessage() {
    console.log('Transition 已完成');
}
var element = document.getElementById("container");
element.addEventListener("transitionend", showMessage, false);

Compatibilité des navigateurs

Prenons l'événement transitionend comme exemple, l'événement animationend est similaire.

On peut voir que le préfixe webkit doit toujours être utilisé dans les navigateurs WebKit, nous devons donc détecter les événements séparément en fonction des différents navigateurs.

Inconvénients

Mon exigence est que ce composant contextuel puisse être appelé fréquemment, c'est-à-dire qu'une fois que l'utilisateur ferme la fenêtre contextuelle, elle sera rouverte .

Utilisez cette solution pour basculer entre display:none et display:block en écoutant l'événement de fin d'animation, mais cela augmentera le coût de rendu du navigateur (redessin et redistribution), et le navigateur doit être pris en compte. La compatibilité nécessite détecter les événements séparément selon différents navigateurs.

Propriété CSS pointer-events

Existe-t-il une solution plus élégante et plus simple ? Présentons notre protagoniste : les événements-pointeurs.

Il convient de noter que ces événements de pointeur sont différents des événements de pointeur (événements et interfaces associées utilisés pour gérer l'entrée du pointeur matériel à partir de périphériques (y compris la souris, le stylet, l'écran tactile, etc.)).

Introduction

La propriété 'pointer-events' spécifie dans quelles circonstances un élément graphique donné peut être l'élément cible d'un événement de pointeur. Elle affecte les circonstances dans lesquelles les éléments suivants sont traités :

  • événements d'interface utilisateur tels que les clics de souris

  • pseudo-classes dynamiques (c'est-à-dire :hover, :active et :focus; [CSS2], section 5.11)

  • hyperliens

En bref, la propriété CSS pointer-events spécifie dans quelles circonstances (le cas échéant) un élément graphique spécifique peut être la cible d'événements de souris.

Spécification

Son extension aux éléments HTML, bien que présente dans les premières versions du module d'interface utilisateur de base CSS niveau 3, a été poussée à son niveau 4.

Il est principalement destiné au SVG, mais a été étendu à d'autres éléments HTML.

Syntaxe

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

Par exemple, pointer-events : visibleFill;

Cela s'applique uniquement au SVG, uniquement lorsque l'attribut de visibilité du element est Lorsqu'il est visible et que le pointeur de la souris est à l'intérieur de l'élément, l'élément deviendra la cible de l'événement de souris. L'attribut fill n'affecte pas le traitement de l'événement.

Les autres attributs applicables uniquement au SVG ne seront pas décrits en détail. Vous pouvez vous y référer ici.

Ici, nous accordons plus d'attention aux deux valeurs d'attribut [auto|none]. Ces deux valeurs d'attribut​​sont également intéressantes à utiliser sur d'autres éléments html.

Lorsque la valeur est auto. L'effet sur les performances est le même que lorsque l'attribut pointer-events n'est pas spécifié. Pour le contenu SVG, cette valeur a le même effet que visiblePainted.

Lorsque la valeur est none, l'élément ne sera jamais la cible d'événements de souris. En d'autres termes, la valeur none signifie que l'événement de souris "pénètre" l'élément et spécifie tout ce qui est "en dessous" de l'élément.

Compatibilité des navigateurs

On peut voir que pointer-events est compatible avec la plupart des navigateurs mobiles et n'a aucune exigence de préfixe.

Points à noter

Lorsque la valeur pointer-events est nulle, cela ne signifie pas nécessairement que l'événement d'écoute d'événement de l'élément ne sera jamais déclenché. Si son élément enfant a l'attribut pointer-events explicitement défini et spécifie qu'il peut être la cible d'un événement de souris, alors le processus de déclenchement sera propagé à l'élément parent via le bouillonnement d'événements, et l'événement d'écoute d'événement de l'élément parent sera déclenché. .

Résumé

Lorsque le composant de couche élastique peut être appelé fréquemment, utilisez la solution d'événements de pointeur, c'est-à-dire lorsque le masque ou le bouton est cliqué et fermé, définissez l'animation du conteneur Effet et événements de pointeur : aucun, lorsque le calque élastique apparaît, définissez les événements de pointeur : auto. De cette façon, le problème peut être résolu en modifiant simplement les propriétés CSS.

Ce qui précède est l'intégralité du contenu de l'attribut CSS pointer-events qui vous a été présenté. J'espère qu'il vous sera utile pour votre apprentissage. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo CSS , Tutoriel vidéo CSS3  !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Manuel en ligne CSS

Manuel en ligne CSS3

Tutoriel graphique div/css

Collection de codes d'effets spéciaux CSS3

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!

Déclaration
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Quelle est la spécificité de @rules, comme @keyframes et @media?Quelle est la spécificité de @rules, comme @keyframes et @media?Apr 18, 2025 am 11:34 AM

J'ai eu cette question l'autre jour. Ma première pensée est: une question étrange! La spécificité concerne les sélecteurs, et les rubriques ne sont pas des sélecteurs, donc ... non pertinents?

Pouvez-vous nist @media et @Support Queries?Pouvez-vous nist @media et @Support Queries?Apr 18, 2025 am 11:32 AM

Oui, vous le pouvez, et cela n'a pas vraiment d'importance dans quel ordre. Un préprocesseur CSS n'est pas requis. Il fonctionne dans CSS ordinaire.

Buste de cache de gorgée rapideBuste de cache de gorgée rapideApr 18, 2025 am 11:23 AM

Vous devriez à coup sûr définir des en-têtes de cache éloignés sur vos actifs comme CSS et JavaScript (et des images et polices et quoi que ce soit d'autre). Cela dit au navigateur

À la recherche d'une pile qui surveille la qualité et la complexité de CSSÀ la recherche d'une pile qui surveille la qualité et la complexité de CSSApr 18, 2025 am 11:22 AM

De nombreux développeurs écrivent sur la façon de maintenir une base de code CSS, mais peu d'entre eux écrivent sur la façon dont ils mesurent la qualité de cette base de code. Bien sûr, nous avons

Le datalist est destiné à suggérer des valeurs sans appliquer de valeursLe datalist est destiné à suggérer des valeurs sans appliquer de valeursApr 18, 2025 am 11:08 AM

Avez-vous déjà eu un formulaire qui devait accepter un petit texte arbitraire? Comme un nom ou autre chose. C'est exactement à quoi sert. Il y a beaucoup de

Conférence avant à ZurichConférence avant à ZurichApr 18, 2025 am 11:03 AM

Je suis tellement excité de me diriger vers Zurich, en Suisse pour la conférence de Front (j'adore ce nom et URL!). Je n'ai jamais été en Suisse auparavant, donc je suis excité

Construire une application sans serveur complète avec des travailleurs CloudFlareConstruire une application sans serveur complète avec des travailleurs CloudFlareApr 18, 2025 am 10:58 AM

L'un de mes développements préférés dans le développement de logiciels a été l'avènement de Serverless. En tant que développeur qui a tendance à s'enliser dans les détails

Création de routes dynamiques dans une application NuxtCréation de routes dynamiques dans une application NuxtApr 18, 2025 am 10:53 AM

Dans cet article, nous utiliserons une démo de magasin de commerce électronique que j'ai construit et déployé sur Netlify pour montrer comment nous pouvons faire des itinéraires dynamiques pour les données entrantes. C'est assez

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Outils chauds

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

MinGW - GNU minimaliste pour Windows

MinGW - GNU minimaliste pour Windows

Ce projet est en cours de migration vers osdn.net/projects/mingw, vous pouvez continuer à nous suivre là-bas. MinGW : un port Windows natif de GNU Compiler Collection (GCC), des bibliothèques d'importation et des fichiers d'en-tête librement distribuables pour la création d'applications Windows natives ; inclut des extensions du runtime MSVC pour prendre en charge la fonctionnalité C99. Tous les logiciels MinGW peuvent fonctionner sur les plates-formes Windows 64 bits.

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

mPDF

mPDF

mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) ​​et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP