it-swarm.com.de

HTML "Overlay", mit dem Klicks auf dahinterliegende Elemente durchgelassen werden

Ich versuche, ein Element über eine Webseite zu legen (um beliebige Grafiken zu zeichnen), und ich bin an dem Punkt angelangt, an dem ich es in einem Element über alles stapeln kann, aber dies verhindert, dass der Benutzer darauf klickt Beliebige Links/Buttons/etc. Gibt es eine Möglichkeit, den Inhalt über alles zu verschieben (es ist halbtransparent, sodass Sie immer noch sehen können, was sich dahinter befindet) und den Benutzer mit der darunter liegenden Ebene zu interagieren?

Ich habe viele Informationen zum DOM-Ereignismodell gefunden, aber keines davon behebt das Problem, bei dem die Schaltflächen und andere "native" Steuerelemente anscheinend nie die Klicks erhalten.

161

Ein dummer Hack, den ich gemacht habe, war, die Höhe des Elements auf Null zu setzen, aber Überlauf: sichtbar; Kombiniere dies mit Zeiger-Ereignissen: none; scheint alle Grundlagen abzudecken.

.overlay {
    height:0px;
    overflow:visible;
    pointer-events:none;
    background:none !important;
}
114
Flatliner DOA

Hinzufügen pointer-events: none; zum Overlay.


Ursprüngliche Antwort: Mein Vorschlag wäre, dass Sie das Klickereignis mit dem Overlay erfassen, das Overlay ausblenden, dann das Klickereignis erneut auslösen und das Overlay dann erneut anzeigen könnten. Ich bin mir nicht sicher, ob Sie einen Flimmereffekt bekommen würden.

[Update] Genau dieses Problem und genau meine Lösung sind in diesem Beitrag aufgetaucht: " Weiterleiten von Mausereignissen durch Ebenen ". Ich weiß, es ist wahrscheinlich ein bisschen spät für das OP, aber um dieses Problem in der Zukunft zu haben, würde ich es einbeziehen.

42
Russell Leggett

Für die Aufzeichnung könnte ein alternativer Ansatz darin bestehen, die anklickbare Ebene zur Überlagerung zu machen: Sie machen sie halbtransparent und platzieren dann das "Überlagerungs" -Bild dahinter (etwas unwillkürlich könnte das "Überlagerungs" -Bild dann sein undurchsichtig sein). Je nachdem, was Sie versuchen, können Sie möglicherweise genau den gleichen visuellen Effekt erzielen (von einem Bild und einer klickbaren Ebene, die halbtransparent übereinander liegen), während Sie Probleme mit der Klickbarkeit vermeiden (weil das "Overlay") "steht nämlich im Hintergrund).

6
Nick F

Für den Fall, dass jemand anderes auf dasselbe Problem stößt, war die einzige Lösung, die mich zufriedenstellte, dass die Zeichenfläche alles abdeckte und dann der Z-Index aller anklickbaren Elemente erhöht wurde. Sie können nicht darauf zeichnen, aber zumindest sind sie anklickbar ...

5

Mein Team ist auf dieses Problem gestoßen und hat es sehr gut gelöst.

  • fügen Sie jedem Element, auf das Sie klicken möchten und das sich unter der Überlagerung befindet, eine Klasse "Passthrough" oder etwas anderes hinzu.
  • fügen Sie für jedes ".passthrough" -Element ein div hinzu und positionieren Sie es genau über dem übergeordneten Element. füge diesem neuen div die Klasse "element-overlay" hinzu.
  • Das CSS ".element-overlay" sollte einen hohen Z-Index haben (über dem Overlay der Seite) und die Elemente sollten transparent sein.

Dies sollte Ihr Problem lösen, da die Ereignisse im ".element-overlay" zu ".passthrough" aufsteigen sollten. Wenn Sie immer noch Probleme haben (wir haben bisher keine gesehen), können Sie mit der Bindung herumspielen.

Dies ist eine Erweiterung der @ jvenema-Lösung.

Das Schöne daran ist, dass

  • sie übergeben nicht ALLE Ereignisse an ALLE Elemente. Nur die, die du willst. (@jvenema's Argument gelöst)
  • Alle Ereignisse werden ordnungsgemäß funktionieren. (Schweben Sie zum Beispiel).

Wenn Sie irgendwelche Probleme haben, lassen Sie es mich bitte wissen, damit ich näher darauf eingehen kann.

4
guy mograbi

Sie können eine Überlagerung mit festgelegter Deckkraft verwenden, damit die Schaltflächen/Anker im Hintergrund sichtbar bleiben. Wenn Sie diese Überlagerung jedoch über einem Element haben, können Sie nicht darauf klicken.

3
yoda

Im Allgemeinen ist dies keine gute Idee. Wenn Sie in Ihrem Szenario böse Absichten hätten, könnten Sie alles unter Ihrer "Überlagerung" verstecken. Wenn ein Benutzer dann auf einen Link klickt, der seiner Meinung nach zu bankofamerica.com führen sollte, wird stattdessen der versteckte Link ausgelöst, der ihn zu myevilsite.com führt.

Das heißt, Event Bubbling funktioniert und wenn es in einer Anwendung ist, ist es keine große Sache. Der folgende Code ist ein Beispiel. Wenn Sie auf den blauen Bereich klicken, wird eine Warnung angezeigt, obwohl die Warnung auf den roten Bereich eingestellt ist. Beachten Sie, dass der orangefarbene Bereich NICHT funktioniert, da sich das Ereignis über die PARENT-Elemente ausbreitet. Ihre Überlagerung muss also inside sein, egal auf welches Element Sie die Klicks beobachten. In Ihrem Szenario haben Sie möglicherweise Pech.

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

Wie wäre es damit für IE ?:

onmousedown: Blendet alle Elemente aus, die das Ereignis überlagern könnten. Weil Anzeige: keine Sichtbarkeit: ausgeblendet funktioniert nicht wirklich, Schieben Sie den überlagernden Teil für eine feste Anzahl von Pixeln aus dem Bildschirm. Nach einer Verzögerung Schieben Sie das überlagernde Div mit der gleichen Anzahl von Pixeln zurück.

onmouseup: In der Zwischenzeit ist dies das Ereignis, das Sie gerne auslösen.

     //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
B.F.