Rendre l'élément non cliquable (cliquer sur les objets situés derrière lui)

Question

J'ai une image fixe qui se superpose à 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", de sorte que si un utilisateur touche cette image et la fait glisser, la page derrière elle continue de défiler comme si l'image n'était pas là pour "bloquer" l'interaction.

Est-ce possible ? Si nécessaire, je peux essayer de fournir des captures d'écran pour illustrer ce que je veux dire.

Merci !

Answer 1

Réglage des CSS - pointer-events: none devrait supprimer toute interaction de la souris avec l'image. Fonctionne très bien dans tous les navigateurs sauf IE.

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

Answer 2

Les événements de pointeur CSS sont ce que vous voulez regarder. Dans votre cas, mettez pointer-events à "none". Regardez cette JSFiddle pour un exemple... http://jsfiddle.net/dppJw/1/

Remarquez que si vous double-cliquez sur l'icône, cela signifie toujours que vous cliquez sur le paragraphe.

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

Answer 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>