HTML "overlay" qui permet aux clics de passer à des éléments derrière elle [dupliquer]

cette question a déjà une réponse ici:

j'essaie de superposer un élément au-dessus d'une page Web (pour dessiner des graphiques arbitraires), et je suis arrivé au point où je peux le empiler à l'intérieur d'un élément au-dessus de tout, mais cela empêche l'utilisateur de cliquer sur des liens/boutons / etc. Y a-t-il un moyen de faire flotter son contenu au-dessus de tout (c'est semi-transparent, donc vous pouvez toujours voir ce qu'il y a derrière) et de faire interagir l'utilisateur avec la couche en dessous?

j'ai trouvé beaucoup d'informations sur le modèle D'événement DOM, mais aucune n'aborde le problème où les boutons et autres contrôles" natifs " ne semblent jamais obtenir les clics en premier lieu.

154
demandé sur vaxquis 2009-09-09 23:41:14

9 réponses

un hack stupide que j'ai fait était de mettre la hauteur de l'élément à zéro mais débordement:visible; combinant ceci avec des événements-pointeur:aucun; semble couvrir toutes les bases. 

.overlay {
    height:0px;
    overflow:visible;
    pointer-events:none;
    background:none !important;
}
109
répondu Flatliner DOA 2014-11-14 14:02:08

ma suggestion serait que vous pourriez capturer l'événement de clic avec la superposition, cacher la superposition, puis modifier l'événement de clic, puis afficher la superposition à nouveau. Je ne suis pas sûr que tu aies un effet de scintillement.

[mise à Jour] Exactement ce problème et exactement ma solution juste d'apparaître dans ce post: " Forwarding les Événements de la Souris à Travers les Couches ". Je sais que c'est probablement un peu tard pour L'opération, mais pour le bien de quelqu'un ayant ce problème en l'avenir, je pensais que je voudrais l'inclure.

35
répondu Russell Leggett 2018-08-09 05:14:00

pour mémoire, une approche alternative pourrait être de faire de la couche cliquable la superposition: vous la rendez semi-transparente, puis vous placez l'image" overlay derrière it (un peu contre-intuitif, l'image "overlay" pourrait alors être opaque). Selon ce que vous tentez de faire, vous pourriez bien être capable d'obtenir le même effet visuel (d'une image et d'une couche cliquable superposée de façon semi-transparente), tout en évitant la cliquabilité problèmes (car la "superposition" est en fait dans le fond).

6
répondu Nick F 2013-04-10 13:09:44

dans le cas où n'importe qui d'autre est en cours d'exécution dans le même problème, la seule solution que j'ai pu trouver qui m'a satisfait était d'avoir la couverture de toile tout et puis d'élever le z-index de tous les éléments cliquables. Vous ne pouvez pas les utiliser, mais au moins ils sont cliquables...

5
répondu Steven Schlansker 2009-09-12 10:11:38

mon équipe s'est penchée sur ce problème et l'a résolu très gentiment.

  • ajouter une classe" passthrough " ou quelque chose à chaque élément que vous voulez cliquable et qui est sous la superposition.
  • pour chacun ".l'élément passthrough " ajoute un div et le positionne exactement sur le dessus de son parent. ajouter la classe" element-overlay " à ce nouveau div.
  • La ".element-overlay" css doit avoir un index z élevé( au-dessus de la page de superposition), et le les éléments doivent être transparentes.

Cela devrait résoudre votre problème, comme les événements sur l' ".l'élément de superposition" doit remonter jusqu' ".passthrough". Si vous avez encore des problèmes (on ne voit pas si loin), vous pouvez jouer avec la liaison.

c'est une amélioration à la solution de @jvenema.

ce qui est bien, c'est que

  • on ne passe pas à travers TOUS les événements de TOUS les élément. Juste celles que tu veux. (argument résolu de @jvenema)
  • tous les événements fonctionneront correctement. (passez la souris par exemple).

Si vous avez des problèmes s'il vous plaît laissez-moi savoir afin que je puisse l'expliquer.

4
répondu guy mograbi 2014-01-14 12:40:56

vous pouvez utiliser une superposition avec opacité réglée pour que les boutons/ancres dans le dos restent visibles, mais une fois que vous avez cette superposition sur un élément, vous ne pouvez pas la cliquer.

3
répondu yoda 2009-09-09 20:00:15

en Général, ce n'est pas une bonne idée. En prenant votre scénario, si vous aviez de mauvaises intentions, vous pourriez tout cacher sous votre "superposition". Ensuite, quand un utilisateur clique sur un lien ils pensent devrait les prendre à bankofamerica.com, à la place il déclenche le lien caché qui les amène à myevilsite.com.

cela dit, le bubbling d'événement fonctionne, et si c'est dans une application, ce n'est pas une grosse affaire. Le code suivant est un exemple. En cliquant sur la zone bleue affiche un alerte, même si l'alerte est définie sur la zone rouge. Notez que la zone orange ne fonctionne pas, car l'événement se propagera à travers les éléments parents, donc votre superposition doit être à l'intérieur de quel que soit l'élément sur lequel vous observez les clics. Dans votre scénario, vous pouvez être hors de la chance. 

<html>
<head>
</head>
<body>
    <div id="outer" style="position:absolute;height:50px;width:60px;z-index:1;background-color:red;top:5px;left:5px;" onclick="alert('outer')"> 
        <div id="nested" style="position:absolute;height:50px;width:60px;z-index:2;background-color:blue;top:15px;left:15px;">
        </div>
    </div>
    <div id="separate" style="position:absolute;height:50px;width:60px;z-index:3;background-color:orange;top:25px;left:25px;">
    </div>
</body>
</html>
2
répondu jvenema 2009-09-09 19:59:08

et ça pour IE?:

onmousedown: cacher tous les éléments qui pourraient recouvrir l'événement. Parce que display:none visibility:hidden ne fonctionne vraiment, pousser la superposition div hors de l'écran pour un nombre fixe de pixels. Après un délai repousser la superposition div avec le même nombre de pixels.

onmouseup: en attendant c'est l'événement que vous aimez tirer. 

     //script
     var allclickthrough=[];         
     function hidedivover(){
              if(allclickthrough.length==0){
                allclickthrough=getElementsByClassName(document.body,"clickthrough");// if so .parentNode
                }
              for(var i=0;i<allclickthrough.length;i++){
                 allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)+2000+"px";
                 }
              setTimeout(function(){showdivover()},1000);   
              }
    function showdivover(){
             for(var i=0;i<allclickthrough.length;i++){
                allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)-2000+"px";
                }
             }       
    //html
    <span onmouseup="Dreck_he_got_me()">Click me if you can.</span>
    <div  onmousedown="hidedivover()" style="position:absolute" class="clickthrough">You'll don't get through!</div>
0
répondu B.F. 2013-01-31 12:41:26

j'avais ce problème en regardant mon site web sur un téléphone. Pendant que j'essayais de fermer la superposition, je cliquais à peu près sur n'importe quoi sous la superposition. Une solution que j'ai trouvé en travaillant pour moi-même est juste d'ajouter a étiquette autour de la superposition complète

-2
répondu stefanplc 2013-12-29 22:18:51