Klaus1: Click auf Div triggert auf darunterliegende Elemente?

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

  1. 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

    1. 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

      --
      Computer müssen weiblich sein: Eigensinnig, schwer zu durchschauen, immer für Überraschungen gut - aber man möchte sie nicht missen.
      1. 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

  2. @@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 } ☞ MDNCan I Use

    LLAP 🖖

    --
    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

    —Marc-Uwe Kling
    1. #Wasserzeichen { pointer-events: none } ☞ MDNCan I Use

      Hallo Gunnar,

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

      LG Klaus

      1. @@Klaus1

        #Wasserzeichen { pointer-events: none } ☞ MDNCan 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 🖖

        --
        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

        —Marc-Uwe Kling
        1. 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

    2. Hallo Gunnar Bittersmann,

      #Wasserzeichen { pointer-events: none } ☞ MDNCan I Use

      selfhtml

      Bis demnächst
      Matthias

      --
      Pantoffeltierchen haben keine Hobbys.
      ¯\_(ツ)_/¯
      1. @@Matthias Apsel

        #Wasserzeichen { pointer-events: none } ☞ MDNCan I Use

        selfhtml

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

        LLAP 🖖

        --
        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

        —Marc-Uwe Kling
        1. Hallo,

          Inwiefern soll dieser Link hilfreicher sein […]?

          Wo hat Matthias behauptet, dass er das sein soll?

          Gruß
          Kalk

          1. @@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 🖖

            --
            „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
            „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

            —Marc-Uwe Kling
            1. 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

              1. @@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 🖖

                --
                „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                —Marc-Uwe Kling
                1. Hallo,

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

                  Soso, sollte es das?

                  Gruß
                  Kalk