web-dev-qa-db-fra.com

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

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 chose, 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 "bloquant" l'interaction.

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

Merci!

htmlcssmobilescrolltouch
70
hannebaumsaway

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

Voici une liste complète de valeurs pointer-events peut prendre.

140
Chris Brown

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 si vous double-cliquez sur l'icône, vous dites toujours que vous cliquez sur le paragraphe.

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
}
13
Terry

Si vous voulez 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>
2
Husam Ebish