Click auf Div triggert auf darunterliegende Elemente?

[Klaus1]

Hallo,

ich hoffe, ich kann das Problem verständlich beschreiben 😉

Auf einer Seite möchte ich so eine Art Wasserzeichen einblenden, immer zentriert, immer sichtbar, wenn auch fast transparent.

Soweit so gut, das habe ich mit einem einfachen DIV und etwas CSS gelöst.

Nun liegen natürlich hinter dem DIV die normalen Elemente der Seite, Eingabefelder, Buttons, etc. Der Anwender möchte nun auf z.B. auf einen Button klicken, aber dieser wird nicht ausgeführt, wenn er vom DIV "verdeckt" wird.

Kann ich einfach so tun, als ob das DIV nicht da wäre, bzw, das Clickevent einfach so weitergeben, als ob nicht das DIV angeklickt worden wäre?

Bei jedem Klick die Koordinaten alle Elemente einzeln zu prüfen, erscheint mir etwas aufwändig wenn überhaupt so umsetzbar.

Hat jemand eine Idee?

LG Klaus

[MudGuard]

Hi,

Nun liegen natürlich hinter dem DIV die normalen Elemente der Seite, Eingabefelder, Buttons, etc. Der Anwender möchte nun auf z.B. auf einen Button klicken

sieht aber, daß sich der Mauszeiger nicht verändert, daß der Button also gar nicht klickbar ist.

Er klickt also gar nicht erst.

Kann ich einfach so tun, als ob das DIV nicht da wäre, bzw, das Clickevent einfach so weitergeben, als ob nicht das DIV angeklickt worden wäre?

ein display:none; für Dein div wäre die einfachste Variante …
Das behebt auch gleich das Problem mit dem sich nicht-ändernden Mauszeiger.

Bei jedem Klick die Koordinaten alle Elemente einzeln zu prüfen, erscheint mir etwas aufwändig wenn überhaupt so umsetzbar.

Nicht nur beim Klick, auch beim Mouse-Move. Wegen des Mauszeigers.

Hat jemand eine Idee?

Wasserzeichen im Hintergrund statt im Vordergrund. Oder ganz weglassen.

cu,
Andreas a/k/a MudGuard

[Der Martin]

Hallo,

Nun liegen natürlich hinter dem DIV die normalen Elemente der Seite, Eingabefelder, Buttons, etc. Der Anwender möchte nun auf z.B. auf einen Button klicken

sieht aber, daß sich der Mauszeiger nicht verändert, daß der Button also gar nicht klickbar ist.

sieht er das wirklich? Mit anderen Worten: Nimmt er es bewusst wahr? Ich behaupte: Nein.
Vielen Nutzern, vor allem den weniger technik-affinen, wird das gar nicht auffallen.

Er klickt also gar nicht erst.

Das bezweifle ich.

Hat jemand eine Idee?

Wasserzeichen im Hintergrund statt im Vordergrund. Oder ganz weglassen.

Ich dachte auch als erstes an ein Hintergrundbild für body oder html. Allerdings wird das dann selbstverständlich von allen nicht-transparenten Seiteninhalten verdeckt.

Ciao,
 Martin

[Klaus1]

Hallo

Er klickt also gar nicht erst.

Das bezweifle ich.

Das kann ich bestätigen. Ich halte mich selbst für technik-affin, habe das DIV selbst dahingesetzt und hab ein paar Mal versucht auf den Button zu klicken, erst die Browser-Konsole geprüft und dann erst festgestellt, dass wohl das DIV darüberliegt.

Hat jemand eine Idee?

Wasserzeichen im Hintergrund statt im Vordergrund. Oder ganz weglassen.

Ich dachte auch als erstes an ein Hintergrundbild für body oder html. Allerdings wird das dann selbstverständlich von allen nicht-transparenten Seiteninhalten verdeckt.

Ich hatte das Wasserzeichen auch erst als Hintergrundbild, aber dann war vom Wasserzeichen nicht mehr viel zu sehen.

Ich habe die Hoffnung, dass man nur Event-technisch das DIV verstecken könnte. Also sichtbar, aber keine Funktion.

LG Klaus

[Gunnar Bittersmann]

@@Klaus1

Nun liegen natürlich hinter dem DIV die normalen Elemente der Seite, Eingabefelder, Buttons, etc. Der Anwender möchte nun auf z.B. auf einen Button klicken, aber dieser wird nicht ausgeführt, wenn er vom DIV "verdeckt" wird.

Kann ich einfach so tun, als ob das DIV nicht da wäre

#Wasserzeichen { pointer-events: none } ☞ MDN • Can I Use

LLAP 🖖

[Klaus1]

#Wasserzeichen { pointer-events: none } ☞ MDN • Can I Use

Hallo Gunnar,

herzlichsten Dank, genau das habe ich gesucht. Du bist der Held des Tages. 👍👍👍

LG Klaus

[Gunnar Bittersmann]

@@Klaus1

#Wasserzeichen { pointer-events: none } ☞ MDN • Can I Use

Hallo Gunnar,

Du bist der Held des Tages. 👍👍👍

Wir sollten hier eine virtuelle Wandtafel „Held des Tages“ einrichten. Gab’s ja früher™ schließlich auch.

Mit #Wasserzeichen { pointer-events: none } ist die Seite in Browsern, die das nicht unterstützen, unbrauchbar. Dagegen sollte man noch was tun, z.B. in diesen Browsern (und Browsern, die @supports nicht unterstützen) das Wasserzeichen nicht anzeigen:

#Wasserzeichen { display: none }

@supports (pointer-events: none)
{
  #Wasserzeichen
  {
    display: block;
    pointer-events: none;
  }
}

LLAP 🖖

[Klaus1]

Wir sollten hier eine virtuelle Wandtafel „Held des Tages“ einrichten. Gab’s ja früher™ schließlich auch.

Dafür! 😀

Mit #Wasserzeichen { pointer-events: none } ist die Seite in Browsern, die das nicht unterstützen, unbrauchbar. Dagegen sollte man noch was tun, z.B. in diesen Browsern (und Browsern, die @supports nicht unterstützen) das Wasserzeichen nicht anzeigen:

Zum Glück ist bei uns der zu verwendene Browser vorgeschrieben. Das vereinfacht die Sache für mich erheblich.

LG Klaus

[Matthias Apsel]

Hallo Gunnar Bittersmann,

#Wasserzeichen { pointer-events: none } ☞ MDN • Can I Use

selfhtml

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

#Wasserzeichen { pointer-events: none } ☞ MDN • Can I Use

selfhtml

Inwiefern soll dieser Link hilfreicher sein als der zu MDN; gerne auch auf deutsch?

LLAP 🖖

[Tabellenkalk]

Hallo,

Inwiefern soll dieser Link hilfreicher sein […]?

Wo hat Matthias behauptet, dass er das sein soll?

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Inwiefern soll dieser Link hilfreicher sein […]?

Wo hat Matthias behauptet, dass er das sein soll?

Ich stelle die Frage anders: Inwiefern soll dieser Link eine sinnvolle Ergänzung zum bereits gegebenen Link zum MDN sein?

LLAP 🖖

[Tabellenkalk]

Hallo,

Ich stelle die Frage anders: Inwiefern soll dieser Link eine sinnvolle Ergänzung zum bereits gegebenen Link zum MDN sein?

Weil dieser Link auf das zu diesem Forum gehörende Wiki führt, wie ein kurzer Klick darauf zeigt. Ohne diesen Link könnte man auf die Idee kommen, das Wiki hätte diesbezüglich eine Lücke.

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Ich stelle die Frage anders: Inwiefern soll dieser Link eine sinnvolle Ergänzung zum bereits gegebenen Link zum MDN sein?

Weil dieser Link auf das zu diesem Forum gehörende Wiki führt, wie ein kurzer Klick darauf zeigt. Ohne diesen Link könnte man auf die Idee kommen, das Wiki hätte diesbezüglich eine Lücke.

Und genau da sind wir beim Punkt: Das SELFHTML-Wiki sollte besser Lücken haben als Lückenfüller zu Dingen, die es anderswo um Längen besser gibt.

LLAP 🖖

[Tabellenkalk]

Hallo,

Das SELFHTML-Wiki sollte […] Lücken haben […]

Soso, sollte es das?

Gruß
Kalk