Rendre l'élément non cliquable (cliquez sur les éléments derrière)

92

J'ai une image fixe qui recouvre une page lorsque l'utilisateur est en train de faire défiler un écran tactile (mobile).

Je veux rendre cette image "non cliquable" ou "inactive" ou autre, de sorte que si un utilisateur touche et traîne de cette image, la page derrière elle défile toujours comme si l'image n'était pas là "bloquant" l'interaction.

Est-ce possible? Au besoin, je pourrais essayer de fournir des captures d'écran illustrant ce que je veux dire.

Merci!

html css mobile scroll touch hannebaumsaway
la source

Réponses:

181

Réglage CSS - pointer-events: nonedevrait supprimer toute interaction de la souris avec l'image. Pris en charge assez bien dans tous sauf IE.

Voici une liste complète des valeurs que vous pointer-eventspouvez prendre.

Chris Brown
la source
2
Parfait! Je n'avais pas croisé pointer-eventsavant, c'est exactement ce que je cherchais. Merci!
hannebaumsaway
1
@Dusty Kinda a du sens, vous désactivez les interactions avec la souris tout en voulant des interactions avec la souris. Quel est votre cas d'utilisation spécifique? D'un point de vue UX qui semble contre-intuitif puisque le pointeur implique que l'élément est cliquable. Si vous jetez un JSFiddle, je peux jeter un œil.
Chris Brown
@ChrisBrown le changement de curseur était un peu bousculant. Voici un peu de ce que j'ai trouvé avec jsfiddle.net/cxwvdos0 C'est un peu fou de désactiver un bouton pendant une seconde et de ne pas changer le curseur. jQuery unbindet bindje pense que cela aurait fonctionné si je voulais convertir mes fonctions anonymes. Merci pour la réponse!
Dusty
ne fonctionne pas sur les appareils mobiles.
Hamendra Sunthwal
17

CSS Pointer Events est ce que vous voulez regarder. Dans votre cas, définissez les événements de pointeur sur "aucun". Regardez ce JSFiddle pour un exemple ... http://jsfiddle.net/dppJw/1/

Notez que double-cliquer sur l'icône signifie toujours que vous cliquez sur le paragraphe.

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
}
Terry
la source
1
Merci pour l'exemple!
hannebaumsaway
Un simple clic *, et l'exemple de code (en cliquant sur l'icône) ne fonctionne pas pour moi dans FF 68.0.
Andrew
3

Si vous souhaitez utiliser JavaScript:

document.getElementById("x").style.pointerEvents = "none";
<a href="https://www.google.com" id="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" id="" />Clickable Google Link</a>
Développer l'extrait

Husam Ebish
la source